--- title: "bd-audio" subtitle: "In-house sound feedback system for user interactions" description: "Documentation for bd-audio — the ByDefault reusable audio library for any project. Covers sound attributes, volume controls, and accessibility features." author: "Studio" section: "Website" layer: "app" subsection: "Interactions" order: 2 --- # bd-audio Our in-house audio feedback library. Add sound effects to any interactive element with a single data attribute. Handles autoplay restrictions, respects reduced motion, and persists user preferences via localStorage. ### Install Add the following to your ``: ```html ``` GSAP is required for the sound toggle button animation. Audio files are loaded from CDN by default. ### Usage Add `data-bd-audio` to any element. ```html Hover sound ``` --- ## Live Demos Click and hover the elements below to hear the sounds. Audio enables on your first click. ### Click Sounds

Button with click sound

Link with click sound

Click this link
```html Click this link ``` ### Hover Sounds

Button with hover sound

Link with hover sound

Hover this link
```html Hover this link ``` ### Combined

Click + hover on same element

```html ``` ### Programmatic Sounds These sounds are triggered via JavaScript — useful for form submissions, success states, or error handling.

Success

Error

Bump

```javascript window.bdAudio.playSound('success'); window.bdAudio.playSound('error'); window.bdAudio.playSound('bump'); ``` --- ## Attributes | Attribute | Description | |-----------|-------------| | `data-bd-audio="click"` | Play click sound on click | | `data-bd-audio="hover"` | Play hover sound on mouseenter | | `data-bd-audio="click hover"` | Both click and hover sounds | ## JavaScript API ```javascript // Play a sound window.bdAudio.playSound('click'); window.bdAudio.playSound('hover'); window.bdAudio.playSound('success'); window.bdAudio.playSound('error'); window.bdAudio.playSound('bump'); // Enable / disable window.bdAudio.setEnabled(true); window.bdAudio.setEnabled(false); // Set volume for a specific sound (0.0 to 1.0) window.bdAudio.setSoundVolume('click', 0.5); // Get current settings window.bdAudio.getSettings(); ``` ## Audio Files | Sound | File | Default Volume | |-------|------|---------------| | Click | `click.mp3` | 0.3 | | Hover | `hover.mp3` | 0.3 | | Success | `success.mp3` | 0.2 | | Error | `error.mp3` | 0.2 | | Bump | `bump.mp3` | 0.2 | --- ## Sound Toggle Button Add a toggle button with `id="bd-sound"` and two icon containers: ```html ``` The script handles state, aria labels, and localStorage persistence automatically. ## Dependencies - **GSAP** — toggle button animation only - Respects `prefers-reduced-motion` - Audio enables on first user click (browser autoplay policy) - Settings persisted in `localStorage` as `bd-audio-settings`