SKILL.md
Sounds on The Web
Sound is the forgotten sense in web design. The auditory cortex processes sound in ~25ms—nearly 10x faster than visual processing. A button that clicks feels faster than one that doesn't, even when visual feedback is identical.
When to Apply
Reference these guidelines when:
- Adding audio feedback to interactions
- Designing confirmation or error states
- Building notification systems
- Creating immersive or game-like experiences
- Reviewing audio UX for appropriateness
Core Principles
| Principle | Description |
|---|---|
| Speed | Sound reaches the brain faster than visuals (~25ms vs ~250ms) |
| Presence | Audio crosses the boundary between device and environment |
| Emotion | A single tone communicates success, error, tension, or playfulness |
| Complement | Sound should enhance, never replace visual feedback |
When to Use Sound
Good Candidates
- Confirmations: Payments, uploads, form submissions
- Errors and warnings: States that can't be overlooked
- State changes: Transitions that reinforce what happened
- Notifications: Interruptions that don't require visual attention
Poor Candidates
- High-frequency interactions (typing, keyboard navigation)
- Decorative moments with no informational value
- Any action where sound would feel punishing
Respecting User Preferences
/* Use prefers-reduced-motion as proxy */
@media (prefers-reduced-motion: reduce) {
/* Disable or reduce audio */
}- Provide explicit toggle in settings
- Allow volume adjustment independent of system volume
- Default to subtle, not loud
Technical Implementation
- Basic
Audioobjects cover most cases - Web Audio API for complex needs
- Keep audio files small and preloaded
- Match sound weight to action weight
Counter-Arguments
| Objection | Response |
|---|---|
| "Users will hate it" | Only if done poorly. Subtle, appropriate, optional sounds are not intrusive. |
| "It's inaccessible" | Sound complements, never replaces. Every audio cue needs a visual equivalent. |
| "It's technically complicated" | Basic audio playback is straightforward. Implementation burden is low. |
| "It's not professional" | Native apps use sound constantly. Web silence is historical accident, not design principle. |
Getting Started
- Pick a single interaction that feels flat
- Add a subtle sound
- Make it optional
- See how it changes the feeling
- Build vocabulary gradually
Key Guidelines
- Match weight: Sound should reflect the importance of the action
- Be informative: Sound should communicate, not punish
- Stay optional: Always provide a way to disable
- Learn from games: They've perfected audio feedback for decades