web-audio_skill

Overview

This skill provides production-tested browser audio patterns for fault-tolerant, zero-lag playback in web apps. It bundles practical recipes for a singleton AudioContext, preloading, cloneNode rapid-fire playback, autoplay handling, and Web Audio API effects. Use it to implement robust SFX, background music, and TTS in vanilla JavaScript projects.

How this skill works

The skill centralizes audio management around a single AudioContext and a preload cache of Audio elements. Sounds are preloaded at startup and reused; rapid overlapping sounds use cloneNode() to avoid network or decoding delays. Playback calls always catch play() rejections and respect user preferences like prefers-reduced-motion and persisted TTS/volume settings. Advanced effects use reusable Web Audio nodes (convolver, gain, ducking) created once and reused.

When to use it

• Games and interactive apps that need instant sound effects with no latency
• Background music with ducking so SFX or voice temporarily lower music
• Rapid-fire UI feedback (typing, hover, clicks) without audio pile-up
• Accessibility features: text-to-speech and reduced-audio preferences
• Development environments where module hot-reload should not restart audio

Best practices

• Create a single AudioContext per page and reuse it forever; resume on first user interaction
• Preload all critical sounds at startup; don't load audio on hot paths
• Use cloneNode() for rapid or overlapping plays; cancel previous instances for non-overlapping voice/UI sounds
• Always call .play().catch(...) and handle NotAllowedError silently to avoid unhandled rejections
• Store persistent singletons on window during development to survive hot-reload
• Respect prefers-reduced-motion and provide user toggles for audio and TTS

Example use cases

• A phonics game that plays short sparkle and success SFX instantly as kids interact
• Background theme music that ducks when milestone celebration sounds play
• Typing feedback that triggers many rapid, low-volume sounds without piling up
• Voice feedback read via Web Speech API with persisted user preference
• Applying a hall reverb to select celebration sounds using a reusable convolver node