Categories: CSSScriptWeb Design

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

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

Bootstrap UI Sounds is a vanilla JavaScript audio feedback library that adds short Web Audio API sound cues to Bootstrap 5 components.

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.