add-audio

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add Audio

添加音频

Add procedural music and sound effects to an existing game. BGM uses Strudel.cc for looping patterns. SFX use the Web Audio API directly for true one-shot playback. No audio files needed — everything is synthesized in the browser.

为现有游戏添加程序化音乐和音效。背景音乐（BGM）使用Strudel.cc实现循环模式，音效（SFX）直接使用Web Audio API实现真正的一次性播放。无需音频文件——所有内容均在浏览器中合成。

Instructions

操作步骤

Analyze the game at

$ARGUMENTS

(or the current directory if no path given).

First, load the game-audio skill to get the full Strudel patterns and integration guide.

分析

$ARGUMENTS

路径下的游戏（若未指定路径则分析当前目录）。

首先，加载game-audio技能以获取完整的Strudel模式和集成指南。

Step 1: Audit

步骤1：审计

Read
```
package.json
```
to identify the engine and check if
```
@strudel/web
```
is installed
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

读取
```
package.json
```
以识别游戏引擎，并检查是否已安装
```
@strudel/web
```
读取
```
src/core/EventBus.js
```
以查看存在哪些游戏事件（如flap、score、death等）
读取所有场景文件以理解游戏流程（游戏进行中、游戏结束）
确定适合游戏类型和氛围的音乐与音效风格

Step 2: Plan

步骤2：规划

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

呈现一份规划音频的表格：

事件/场景	音频类型	风格	描述
GameScene	BGM	芯片音乐（Chiptune）	欢快的方波旋律+贝斯+鼓点
GameOverScene	BGM	低沉忧郁	缓慢下行的旋律
玩家动作	SFX	复古风格	快速音调扫频
得分	SFX	复古风格	双音调提示音
死亡	SFX	复古风格	下行失真音符

用通俗易懂的语言说明：“背景音乐将在每个场景中自动循环播放。当你执行跳跃、得分或死亡等操作时，会触发音效播放。首次点击/触摸时，音频系统将激活（浏览器要求必须有用户交互才能播放声音）。”

Step 3: Implement

步骤3：实现

Install
```
@strudel/web
```
if not already present
Create
```
src/audio/AudioManager.js
```
— manages Strudel init, BGM play/stop (uses
```
hush()
```
+ 100ms delay before new
```
.play()
```
)
Create
```
src/audio/AudioBridge.js
```
— wires EventBus events to AudioManager for BGM, calls SFX functions directly
Create
```
src/audio/music.js
```
with BGM for each scene (Strudel
```
stack()
```
+
```
.play()
```
— these 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

(

AUDIO_INIT

MUSIC_GAMEPLAY

MUSIC_GAMEOVER

MUSIC_STOP

)

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

Critical: Strudel's

.play()

starts a continuously looping pattern — correct for BGM, wrong for SFX. SFX must use the Web Audio API directly (see game-audio skill). Import

stack

note

hush

from

@strudel/web

for BGM only.

若尚未安装
```
@strudel/web
```
，则进行安装
创建
```
src/audio/AudioManager.js
```
——管理Strudel初始化、BGM播放/停止（使用
```
hush()
```
+100ms延迟后再执行新的
```
.play()
```
）
创建
```
src/audio/AudioBridge.js
```
——将EventBus事件与AudioManager关联以控制BGM，直接调用SFX函数
创建
```
src/audio/music.js
```
，包含每个场景的BGM（使用Strudel的
```
stack()
```
+
```
.play()
```
——这些会持续循环）
创建
```
src/audio/sfx.js
```
，包含每个事件的SFX（Web Audio API——使用OscillatorNode + GainNode + BiquadFilterNode实现真正的一次性播放）

向

EventBus.js

中添加音频事件（

AUDIO_INIT

、

MUSIC_GAMEPLAY

、

MUSIC_GAMEOVER

、

MUSIC_STOP

）

在
```
main.js
```
中调用
```
initAudioBridge()
```
在首次用户交互时触发
```
AUDIO_INIT
```
（游戏直接启动，无菜单）
在场景切换时触发音乐事件，在游戏动作触发时触发SFX事件

关键注意事项：Strudel的

.play()

会启动持续循环的模式——这适用于BGM，但不适用于SFX。SFX必须直接使用Web Audio API实现（请查看game-audio技能）。仅在BGM中从

@strudel/web

导入

stack

、

note

、

hush

。

Step 4: Verify

步骤4：验证

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"
Note the AGPL-3.0 license requirement for
```
@strudel/web
```

运行
```
npm run build
```
以确认无错误
列出所有创建/修改的文件
提醒用户：“点击/触摸一次以激活音频，之后即可听到音乐”
注意
```
@strudel/web
```
要求遵循AGPL-3.0许可证

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: ~~/make-game~~ → ~~/design-game~~ → ~~/add-audio~~ →
/qa-game
→
/review-game

告知用户：

你的游戏现在已经拥有音乐和音效了！接下来，请运行
/game-creator:qa-game
添加自动化测试，验证游戏能否正常启动、场景切换是否正常、计分功能是否可用，以及视觉效果是否未被破坏。
流程进度： ~~/make-game~~ → ~~/design-game~~ → ~~/add-audio~~ →
/qa-game
→
/review-game