Add music and sound effects to a game using the Web Audio API — background music, gameplay themes, and SFX. Zero dependencies. Use when the user says "add music", "add sound effects", "add audio", "make it sound good", "add BGM", or "add SFX to my game". Do NOT use for gameplay features or visual design.
Add procedural music and sound effects to an existing game. BGM uses a Web Audio API step sequencer for looping patterns. SFX use the Web Audio API directly for true one-shot playback. No audio files or npm packages needed — everything is synthesized in the browser.
Analyze the game at $ARGUMENTS (or the current directory if no path given).
First, load the game-audio skill to get the full Web Audio patterns and integration guide.
src/core/EventBus.js to see what game events exist (flap, score, death, etc.)Present a table of planned audio:
| Event / Scene | Audio Type | Style | Description |
|---|---|---|---|
| GameScene | BGM | Chiptune | Upbeat square wave melody + bass + drums |
| GameOverScene | BGM | Somber | Slow descending melody |
| Player action | SFX | Retro | Quick pitch sweep |
| Score | SFX | Retro | Two-tone ding |
| Death | SFX | Retro | Descending crushed notes |
Explain in plain English: "Background music will automatically loop during each scene. Sound effects will play when you do things like jump, score, or die. The first time you click/tap, the audio system will activate (browsers require a user interaction before playing sound)."
src/audio/AudioManager.js — AudioContext init, master gain node, BGM sequencer play/stopsrc/audio/AudioBridge.js — wires EventBus events to AudioManager for BGM, calls SFX functions directlysrc/audio/music.js with BGM patterns for each scene (Web Audio step sequencer — note arrays that loop continuously)src/audio/sfx.js with SFX for each event (Web Audio API — OscillatorNode + GainNode + BiquadFilterNode for true one-shot playback)EventBus.js if not present (AUDIO_INIT, MUSIC_GAMEPLAY, MUSIC_GAMEOVER, MUSIC_STOP, AUDIO_TOGGLE_MUTE)initAudioBridge() in main.jsAUDIO_INIT on first user interaction (game starts immediately, no menu)AUDIO_TOGGLE_MUTE event, UI button, M key shortcutnpm run build to confirm no errors/add-audio examples/flappy-bird
Result: Creates src/audio/AudioManager.js, music.js (gameplay + game-over BGM patterns), sfx.js (flap, score, death, button SFX) → wires via AudioBridge → mute toggle on M key. First click activates audio.
Cause: AudioContext not resumed after user interaction (browser autoplay policy). Fix: Ensure AudioContext.resume() is called on first user input (click/tap/keydown). Check for AUDIO_INIT event wiring.
Cause: Creating new OscillatorNodes every frame. Fix: SFX should be one-shot (create, connect, start, stop). BGM uses a single looping sequencer. Never create nodes in update().
Tell the user:
Your game now has music and sound effects! Next, run
/game-creator:qa-gameto add automated tests that verify your game boots correctly, scenes transition properly, scoring works, and visuals haven't broken.Pipeline progress:
/make-game→/design-game→/add-audio→/qa-game→/review-game