## Sound & Audio

Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/advanced-features/sound-audio
Updated: 2026-09-06

Monogram includes an interactive sound feedback system that adds subtle audio cues to user interactions. Hover over a button, click a link, open a menu - each action can play a short sound effect for a rich, immersive experience. The system also supports looping background audio.

Sounds are **desktop-only** and powered by the **Web Audio API** for low-latency playback. A small canvas wave visualization in the navigation bar provides visual feedback showing that audio is active.

## How It Works

Audio does not autoplay. The sound engine initializes on the visitor first click or keypress, respecting browser autoplay policies. Once unlocked, UI sound effects play automatically on hover, click, toggle, and other interactions. Background audio begins looping if enabled.

Visitors can toggle sounds on or off using the sound button in the navigation bar. The button shows a wave animation when sounds are active and goes idle when muted.

## Settings

Navigate to **Appearance > Customize > Sound & Audio** to configure the feature.

### General Tab

<table style="min-width:100px;"><colgroup><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Enable Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Master switch for all sound effects and background audio.</p></td></tr></tbody></table>

### UI Effects Tab

<table style="min-width:100px;"><colgroup><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Enable UI Sound Effects</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Global toggle for all interface interaction sounds.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>UI Effects Volume</strong></p></td><td colspan="1" rowspan="1"><p>Slider (0-1.0)</p></td><td colspan="1" rowspan="1"><p>0.6</p></td><td colspan="1" rowspan="1"><p>Volume for all UI sounds. A value of 0.5-0.7 is recommended for a subtle experience.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Hover Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a sound on hover over buttons and links.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Click Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a sound on click or tap.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Toggle Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a sound when switching checkboxes, radios, or toggles.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Submit / Confirm Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a sound on form submission or action confirmation.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Open Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a sound when a modal, dropdown, or menu opens.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Close Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a sound when a modal, dropdown, or menu closes.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Success Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a sound after a successful action.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Error Sounds</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a sound to signal a failed action or validation error.</p></td></tr></tbody></table>

### Background Audio Tab

<table style="min-width:100px;"><colgroup><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Enable Background Audio</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Play a looping background track after the first user interaction.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Background Volume</strong></p></td><td colspan="1" rowspan="1"><p>Slider (0-1.0)</p></td><td colspan="1" rowspan="1"><p>0.25</p></td><td colspan="1" rowspan="1"><p>Volume for the background track. Keep this low (0.1-0.3) so it does not compete with content.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Background Audio File</strong></p></td><td colspan="1" rowspan="1"><p>Upload</p></td><td colspan="1" rowspan="1"><p>-</p></td><td colspan="1" rowspan="1"><p>Upload an MP3 file for the background loop. Keep the file under 2 MB using 128 kbps bitrate.</p></td></tr></tbody></table>

### Sound Files Tab

Upload custom MP3 files to replace any of the default sounds. Leave a field empty to use the bundled default. Keep files under 100 KB for best performance.

<table style="min-width:50px;"><colgroup><col style="min-width:25px;"><col style="min-width:25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Hover Sound File</strong></p></td><td colspan="1" rowspan="1"><p>Custom hover sound</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Click Sound File</strong></p></td><td colspan="1" rowspan="1"><p>Custom click sound</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Toggle Sound File</strong></p></td><td colspan="1" rowspan="1"><p>Custom toggle sound</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Submit Sound File</strong></p></td><td colspan="1" rowspan="1"><p>Custom submit/confirm sound</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Open Sound File</strong></p></td><td colspan="1" rowspan="1"><p>Custom open sound</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Close Sound File</strong></p></td><td colspan="1" rowspan="1"><p>Custom close sound</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Success Sound File</strong></p></td><td colspan="1" rowspan="1"><p>Custom success sound</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Error Sound File</strong></p></td><td colspan="1" rowspan="1"><p>Custom error sound</p></td></tr></tbody></table>

### Advanced Tab

<table style="min-width:100px;"><colgroup><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"><col style="min-width:25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Remember User Sound Preference</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Save the visitor sound on/off choice in their browser so it persists across visits.</p></td></tr></tbody></table>

## Using Sound Attributes in Your Content

You can control sounds on individual elements using HTML `data-sound` attributes:

- `data-sound="hover"` - play the hover sound when this element is hovered
- `data-sound="click"` - play the click sound when this element is clicked
- `data-sound="open"` - play the open sound (useful for custom modals)
- `data-sound="off"` - disable all sounds for this element

Any of the eight sound types (hover, click, toggle, submit, open, close, success, error) can be used as a `data-sound` value.

<div data-callout="info">

For developers: you can trigger any sound programmatically by calling `window.jkdPlaySound('hover')` (or any other sound name) from your custom JavaScript.

</div>