Web Audio SFX Synth (no audio files)
/web-audio-sfx-synth
A GameSkill original: 12 game sound effects made from code with the Web Audio API, plus the mixer around them: unlock on the first tap, a compressed master bus with mute, pitch and level variation, stereo pan, distance falloff and a voice limiter. Every sound is rendered offline and checked for clipping.
- 许可证
- MIT
- 出品
- GameSkill 出品
我们测过
在 Web Audio API in Chrome 156 headless (OfflineAudioContext + AudioContext) 上通过 46/46 项检查（2026-10-28）：能触发、有可运行示例、有截图和自检清单、单一职责、中英文文档齐全。触发检查是把提示词和 skill 描述做匹配，不是真实 agent 运行。
测试报告GameSkill 测过的版本
GameSkill 为 gameskill.dev 原创编写并测过。ZIP 里是完整的 skill：SKILL.md 及中文版、脚本、可运行示例、测试、自检清单和我们的测试报告。
GameSkill 原创，协议 MIT。ZIP 保留 LICENSE 和 CREDITS.md，里面列出了流程灵感来源、CC0 测试素材和第三方库及其协议。
自检清单
- AudioContext 在用户操作里创建或恢复 / AudioContext created or resumed inside a user gesture
- 所有声音经过同一条带压缩器的总线，静音只改总音量 / Every sound goes through one compressed master bus; mute changes only the master gain
- 包络从 0 起音，指数衰减到 0.0001 而不是 0 / Envelopes start from silence and ramp to 0.0001, never 0
- 同一声音有数量上限和最短间隔 / Each sound has a copy cap and a minimum gap between starts
- 每个新配方离线渲染：峰值在 0.05 到 0.99 之间，结尾静音 / Every new recipe is rendered offline: peak between 0.05 and 0.99, silent at the end
- npm test 和 npm run test:browser 都通过 / npm test and npm run test:browser pass
中文指南
这个 skill 做什么
GameSkill 原创（MIT）。用 Web Audio API 在浏览器里用代码生成 12 个游戏音效（射击、激光、爆炸、受击、跳跃、拾取、金币、强化、界面点击和确认、脚步、雷声），不需要任何音频文件。另外配好一套“混音台”：第一次点击时解锁声音、带压缩器和静音的总线、每次播放随机一点音高和音量、按位置左右声像、按距离衰减，以及限制同一个声音同时响几次。
什么时候用
- 网页 / HTML5 游戏需要音效，但手上没有音频素材
- 游戏没声音，要点一下才响（浏览器自动播放策略）
- 声音破音、叠在一起很刺耳，或者每一枪听起来都一模一样
怎么装
下载本页的 ZIP，把 web-audio-sfx-synth/ 文件夹放进 .claude/skills/（Claude Code）或 .agents/skills/（Codex、Cursor），重启 agent。只有一个 JS 文件，没有运行时依赖。
最小示例
node test/serve.mjs 后打开 http://localhost:8770/，是一个音效面板：12 张卡片，每张画出离线渲染的波形，点一下就播放；下面的长条点左边或右边，枪声就从那一侧出来。游戏里只需要 createSfx()、在点击和按键时 unlock()，再 play('shoot')。
我们怎么测的
npm test 跑 12 个 Node 测试：配方合法、校验器能抓 6 类错误、包络形状、半音和分贝换算、随机变化范围、声像、距离衰减、限流的间隔、抢占和过期。npm run test:browser 在无头 Chrome 里做 20 项检查：12 个音效全部用 OfflineAudioContext 渲染，确认听得见、不破音、没有 NaN、结尾静音；点击前不发声、点击后能播放；连点 10 次脚步会被限流；左右声像正确；静音正常；没有控制台错误。
致谢
思路参考了 stackloomdev 的 Last Beacon（MIT）、jackroc 的 THUNDERFALL（CC0）和 Hiraeth010 的 BLACKWATER（MIT）里的合成音效。没有复制代码，配方、代码和文字都是我们写的。
搭配
audio-design：音乐、分组混音、自适应配乐game-feel：把音效和震屏、停顿一起用mechanic-one-button-flight：给拍翅膀、得分、撞击配音
安装
告诉你的 AI
Install the skill from https://gameskill.dev/skills/web-audio-sfx-synth/install.md
GameSkill 测过的版本
mkdir -p .claude/skills
curl -fsSL https://gameskill.dev/dl/skills/web-audio-sfx-synth.zip -o /tmp/gameskill-web-audio-sfx-synth.zip
unzip -oq /tmp/gameskill-web-audio-sfx-synth.zip -d .claude/skills
rm /tmp/gameskill-web-audio-sfx-synth.zip包含内容
- src/sfx.js: 12 recipes (shoot, laser, explosion, hit, jump, pickup, coin, power-up, UI click and confirm, footstep, thunder)
- createSfx(): unlock on a user gesture, compressed master bus, mute, variation, pan and distance
- VoiceLimiter: per-sound caps and minimum gaps, global cap, oldest copy stolen with a fade
- validateRecipe() for your own sounds, and a soundboard page that draws every waveform
- 12 Node tests and 20 headless Chrome checks, including an offline render of every sound
适合
- Web and HTML5 games that need sound but have no audio assets
- Fixing silent games (autoplay policy), clipping and machine-gun repetition
不适合
- Music and adaptive soundtracks: see audio-design
- Engine audio buses in Godot, Unity or Unreal: use the engine audio skills
试试这条提示词
Add shoot, hit, pickup and explosion sounds to my canvas game without any audio files.关于这个 Skill
A GameSkill original, written and tested for gameskill.dev under MIT. src/sfx.js is one dependency-free file: recipes as data, maths tested in Node, and a small player that schedules Web Audio nodes. The demo is a soundboard that renders every recipe offline, draws its waveform and plays it.
Agent steps
- Unlock on a gesture: create or resume the
AudioContextinsidepointerdown/keydown. - One master bus: sound gain →
StereoPanner→ master gain → compressor. Mute is the master gain. - Recipes are data: oscillator or noise layers with a frequency sweep or notes, attack, duration, gain and an optional filter sweep. Validate new ones.
- Envelope: linear attack, exponential ramp to 0.0001 (never 0, never start at full gain).
- Variation: ±60 cents and ±1.5 dB per play, seeded.
- Limits: per-sound cap and minimum gap, a global cap of 24, oldest copy stolen with a fade.
- Space:
panForfor 2D pan,distanceGainfor falloff. - Check every sound offline: peak between 0.05 and 0.99, no NaN, silent in the last 10 ms.
Common errors it fixes
- No sound at all: the context was created at page load and stays
suspended. exponentialRampToValueAtTimethrowing because it ramps to 0.- Clipping and harsh stacks when many copies of one sound play at once.
Credits
Ideas from the synthesised audio in Last Beacon by stackloomdev (MIT), THUNDERFALL by jackroc (CC0-1.0) and BLACKWATER by Hiraeth010 (MIT). No code was copied; recipes, code and text are ours.
环境要求
- A browser with the Web Audio API (all current desktop and mobile browsers)
- Node.js 20+ to run the tests; Chrome for the browser check
相关主题
常见问题
基于 Last Beacon （作者 stackloomdev，MIT）的思路。代码和文字由 GameSkill 编写，ZIP 里的 CREDITS.md 列出所有来源。 · 基于 THUNDERFALL （作者 jackroc，CC0-1.0）的思路。代码和文字由 GameSkill 编写，ZIP 里的 CREDITS.md 列出所有来源。 · 基于 BLACKWATER （作者 Hiraeth010，MIT）的思路。代码和文字由 GameSkill 编写，ZIP 里的 CREDITS.md 列出所有来源。
搭配使用
作者标注的相关 Skills，或更适合相邻任务的 Skills。
Game Audio Design
Engine-neutral game audio: mixer buses and decibel gain, ducking, adaptive music through layering, SFX variation and beat sync.
Game Feel & Juice
Add juice to actions: screen shake, hit-stop, eased motion, squash and stretch, knockback and layered audio-visual feedback.
Godot Audio
Play and mix audio in Godot 4.7: AudioStreamPlayers, buses and effects, music and SFX routing, and beat-accurate timing.
相似 skills
Godogen
Autonomous game development with Claude Code and Codex. Publishes a ready game repo for Godot, Bevy, Babylon.js or three.js.
Three.js Game Skills
Nine Agent Skills for Codex and Claude Code that build playable Three.js browser games, with a director skill, a Vite scaffold and Playwright QA.
3AGameFactory (GameFactory-3A)
An Apache-2.0 framework of agent skills and pipelines that turns a game requirement into assets (image, 3D, motion, audio, CG video) and engine-ready code for UE5, Blender, Unity, Godot 4 and three.js.
FunPlay Skill
14 MIT agent skills for game development with scripts and tests: sprite-sheet slicing, normal maps, audio conversion, game concept briefs, browser game slices, Unity MCP workflow and Cocos/WeChat minigame rules.