Sound & Audio

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

Setting	Type	Default	Description
Enable Sounds	Toggle	On	Master switch for all sound effects and background audio.

#UI Effects Tab

Setting	Type	Default	Description
Enable UI Sound Effects	Toggle	On	Global toggle for all interface interaction sounds.
UI Effects Volume	Slider (0-1.0)	0.6	Volume for all UI sounds. A value of 0.5-0.7 is recommended for a subtle experience.
Hover Sounds	Toggle	On	Play a sound on hover over buttons and links.
Click Sounds	Toggle	On	Play a sound on click or tap.
Toggle Sounds	Toggle	On	Play a sound when switching checkboxes, radios, or toggles.
Submit / Confirm Sounds	Toggle	On	Play a sound on form submission or action confirmation.
Open Sounds	Toggle	On	Play a sound when a modal, dropdown, or menu opens.
Close Sounds	Toggle	On	Play a sound when a modal, dropdown, or menu closes.
Success Sounds	Toggle	On	Play a sound after a successful action.
Error Sounds	Toggle	On	Play a sound to signal a failed action or validation error.

#Background Audio Tab

Setting	Type	Default	Description
Enable Background Audio	Toggle	On	Play a looping background track after the first user interaction.
Background Volume	Slider (0-1.0)	0.25	Volume for the background track. Keep this low (0.1-0.3) so it does not compete with content.
Background Audio File	Upload	-	Upload an MP3 file for the background loop. Keep the file under 2 MB using 128 kbps bitrate.

#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.

Setting	Description
Hover Sound File	Custom hover sound
Click Sound File	Custom click sound
Toggle Sound File	Custom toggle sound
Submit Sound File	Custom submit/confirm sound
Open Sound File	Custom open sound
Close Sound File	Custom close sound
Success Sound File	Custom success sound
Error Sound File	Custom error sound

#Advanced Tab

Setting	Type	Default	Description
Remember User Sound Preference	Toggle	On	Save the visitor sound on/off choice in their browser so it persists across visits.

#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.

Last updated 6 Sep 2026