Sound Effects

Experimental audio feedback using Web Audio API. Click, hover, success, and error sounds with user preference controls.

Token Reference: See Themes > Extensions for token documentation. Source: src/lib/sound-manager.js

Volume:

Interaction Sounds

Click the buttons to hear different sound effects.

// Web Audio API tone generator function playTone(frequency, duration, type = 'sine') { const ctx = new AudioContext(); const oscillator = ctx.createOscillator(); const gainNode = ctx.createGain(); oscillator.connect(gainNode); gainNode.connect(ctx.destination); oscillator.frequency.value = frequency; oscillator.type = type; gainNode.gain.value = volume * 0.3; oscillator.start(); gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + duration); oscillator.stop(ctx.currentTime + duration); }

Hover Sounds

Hover over cards to trigger subtle audio feedback.

Considerations

Important factors for implementing sound in web interfaces.

Opt-in by default: Sound should be disabled until the user explicitly enables it.
Volume control: Users should be able to adjust or mute sounds independently.
Accessibility: Never rely on sound alone to convey information. Always pair with visual feedback.
Performance: Use Web Audio API with pre-generated oscillator tones instead of audio files.
Context: Consider if sound adds value or is just noise. Most web apps don't need sound.

Sound Effects

Interaction Sounds

Hover Sounds

Soft

Tick

Whoosh

Considerations