By rssfeeds-admin 
Embed the script into your Bootstrap project and form interactions, modal dialogs, dropdowns, carousels, toast notifications, and validation states all produce subtle tonal sounds on user interaction.
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 |
Alternatives:
The post Add Web Audio Feedback to Bootstrap 5 Components – Bootstrap UI Sounds appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.