add-audio

Q: How do I install add-audio?

Run npx skills add https://github.com/playableintelligence/game-creator --skill add-audio in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/add-audio/ (personal) or .claude/skills/add-audio/ (project).

by playableintelligenceMedia & Creative

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.

Installs: 1K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/playableintelligence/game-creator --skill add-audio

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads add-audio automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Performance Notes

Take your time to do this thoroughly
Quality is more important than speed
Do not skip validation steps

Add Audio

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.

Instructions

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.

Step 1: Audit

Read src/core/EventBus.js to see what game events exist (flap, score, death, etc.)
Read all scene files to understand the game flow (gameplay, game over)
Identify what music and SFX would fit the game's genre and mood

Step 2: Plan

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)."

Step 3: Implement

Create src/audio/AudioManager.js — AudioContext init, master gain node, BGM sequencer play/stop
Create src/audio/AudioBridge.js — wires EventBus events to AudioManager for BGM, calls SFX functions directly
Create src/audio/music.js with BGM patterns for each scene (Web Audio step sequencer — note arrays that loop continuously)
Create src/audio/sfx.js with SFX for each event (Web Audio API — OscillatorNode + GainNode + BiquadFilterNode for true one-shot playback)
Add audio events to EventBus.js if not present (AUDIO_INIT, MUSIC_GAMEPLAY, MUSIC_GAMEOVER, MUSIC_STOP, AUDIO_TOGGLE_MUTE)
Wire initAudioBridge() in main.js
Emit AUDIO_INIT on first user interaction (game starts immediately, no menu)
Emit music events at scene transitions and SFX events at game actions
Add mute toggle — AUDIO_TOGGLE_MUTE event, UI button, M key shortcut

Step 4: Verify

Run npm run build to confirm no errors
List all files created/modified
Remind the user: "Click/tap once to activate audio, then you'll hear the music"

Example Usage

Full audio pass

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

Troubleshooting

No sound plays

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.

Audio causes lag spikes

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().

Next Step

Tell the user:

Your game now has music and sound effects! Next, run /game-creator:qa-game to add automated tests that verify your game boots correctly, scenes transition properly, scoring works, and visuals haven't broken.

Pipeline progress: ~~/viral-game~~ → ~~/design-game~~ → ~~/add-audio~~ → /qa-game → /review-game

(This is the /viral-game one-shot pipeline — not the /make-game multi-session, milestone-driven workflow.)

FAQ

What does the add-audio skill do?

How do I install add-audio?

Run npx skills add https://github.com/playableintelligence/game-creator --skill add-audio in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/add-audio/ (personal) or .claude/skills/add-audio/ (project).

Which AI agents can use add-audio?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is add-audio safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains add-audio?

It is published by playableintelligence in playableintelligence/game-creator. It has 1,008 recorded installs.