Add Web Audio Feedback to Bootstrap 5 Components - Bootstrap UI Sounds

Authorcoliff

Last UpdateMay 12, 2026

LicenseMIT

Features:

Synthesizes all sounds in the browser using the Web Audio API.
Activates globally or scoped to a specific container with one HTML attribute.
Distinct tonal presets for 21 interaction types, including separate sounds for switch-on versus switch-off, checkbox checked versus unchecked, carousel previous versus next, and form valid versus invalid states.
Range slider volume scales proportionally to the slider’s current value position.
Listens for Bootstrap’s own JavaScript events (show.bs.modal, hide.bs.collapse, show.bs.toast, and others) on component-driven interactions.
Raw click listeners handle buttons and carousel controls.
Uses a MutationObserver to catch dynamically injected alert elements and play the alert sound immediately on DOM insertion.
Resumes a suspended AudioContext automatically on first user interaction.

How to use it:

1. Load Bootstrap CSS and JS first, then add the Bootstrap UI Sounds script before the closing </body> tag.

<!-- Bootstrap CSS -->
<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<!-- Your page content here -->
<!-- Bootstrap JS bundle (includes Popper) -->
<script src="/path/to/bootstrap.bundle.min.js"></script>
<!-- Bootstrap UI Sounds — must load after Bootstrap JS -->
<script src="/path/to/js/bootstrap-ui-sounds.js" defer></script>

2. The plugin is off by default. Activate it by adding data-ui-sounds to the <html> tag, the <body> tag, or any container element you want to scope.

<!-- Adding data-ui-sounds to <html> activates sounds for the entire page -->
<html lang="en" data-ui-sounds="true">

<!-- Sounds play only for components inside this container -->
<div class="settings-panel" data-ui-sounds="true">
  <button class="btn btn-primary">Save settings</button>
  <!-- Other Bootstrap components here -->
</div>

3. Available sound presets. The library uses fixed internal presets. Each maps to a specific interaction type. All use the Web Audio API OscillatorNode with a gain envelope.

Preset Name	Freq (Hz)	Duration (s)	Waveform	Volume
`click`	800	0.05	sine	0.28
`open`	520	0.07	sine	0.26
`close`	320	0.06	sine	0.26
`expand`	600	0.06	sine	0.26
`collapse`	400	0.06	sine	0.26
`alert`	660	0.06	sine	0.24
`focus`	440	0.04	sine	0.20
`change`	550	0.045	sine	0.22
`toast`	580	0.06	sine	0.24
`detail`	500	0.055	sine	0.26
`carouselPrev`	500	0.055	sine	0.24
`carouselNext`	660	0.055	sine	0.24
`closeButton`	380	0.05	sine	0.24
`switchOn`	780	0.05	square	0.25
`switchOff`	420	0.055	triangle	0.23
`checkboxOn`	650	0.05	square	0.24
`checkboxOff`	400	0.06	triangle	0.22
`radio`	680	0.045	triangle	0.23
`range`	500	0.04	sine	0.22
`formInvalid`	280	0.10	triangle	0.20
`formValid`	520	0.10	triangle	0.22