用途
该技能用于给已有的游戏添加程序化音乐与音效。背景音乐(BGM)通过 Web Audio API 的步进音序器实现循环播放模式;音效(SFX)直接使用 Web Audio API 实现真正的一次性播放。整个过程不需要音频文件,也不需要 npm 包,所有声音都在浏览器中合成。
主要能力
- 分析游戏现有的事件与场景,确定适合的音乐与音效方案。
- 为每个场景生成循环播放的 BGM 模式(如游戏进行中、游戏结束)。
- 为游戏事件生成一次性音效(如跳跃、得分、死亡、按钮)。
- 通过事件总线(EventBus)将游戏事件与音频系统连接。
- 提供静音切换功能,包括事件、UI 按钮与 M 键快捷键。
- 处理浏览器自动播放策略:首次用户交互后激活音频。
使用方式
技能以指令形式调用,可指定游戏路径,例如:
/add-audio examples/flappy-bird
执行流程分为四步:
- 审计:读取 src/core/EventBus.js 了解现有游戏事件,读取所有场景文件理解游戏流程,判断适合的音乐与音效。
- 规划:以表格形式列出计划添加的音频,包含事件/场景、音频类型、风格、描述,并用通俗语言说明 BGM 会自动循环、SFX 在特定动作时播放、首次点击/触摸会激活音频系统。
- 实现:创建 src/audio/AudioManager.js(AudioContext 初始化、主增益节点、BGM 音序器播放/停止)、src/audio/AudioBridge.js(将 EventBus 事件连接到 AudioManager)、src/audio/music.js(各场景 BGM 模式)、src/audio/sfx.js(各事件音效);在 EventBus.js 中添加音频事件(AUDIO_INIT、MUSIC_GAMEPLAY、MUSIC_GAMEOVER、MUSIC_STOP、AUDIO_TOGGLE_MUTE);在 main.js 中接入 initAudioBridge();在首次用户交互时发出 AUDIO_INIT;在场景切换时发出音乐事件,在游戏动作时发出音效事件;添加静音切换。
- 验证:运行 npm run build 确认无错误,列出创建/修改的文件,并提醒用户点击/触摸一次以激活音频。
适用场景
适用于已有游戏项目需要补充背景音乐与音效的情况,尤其是使用事件总线架构、按场景组织的游戏。示例中用于 flappy-bird 类游戏,生成游戏进行与游戏结束的 BGM 模式,以及跳跃、得分、死亡、按钮音效。
限制与注意事项
- 浏览器要求用户交互后才能播放声音,因此首次点击/触摸/按键前不会有声音,需确保在首次用户输入时调用 AudioContext.resume() 并检查 AUDIO_INIT 事件接线。
- 若在每一帧创建新的 OscillatorNode 会导致卡顿,音效应为一次性(创建、连接、启动、停止),BGM 使用单一循环音序器,切勿在 update() 中创建节点。
- 该技能属于 /viral-game 一次性流水线的一部分,流程为 /viral-game → /design-game → /add-audio → /qa-game → /review-game,不同于 /make-game 的多会话里程碑式工作流。
- 官方文档未提供具体收费、价格或平台信息。