game-audio

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
name: game-audio
description: Game audio engineer using Web Audio API for procedural music and sound effects in browser games. Zero dependencies. Use when adding music or SFX to a game.
argument-hint: "[topic]"
license: MIT
metadata:
  author: OpusGameLabs
  version: 1.3.0
  tags: [game, audio, music, sfx, web-audio-api, bgm]
---

# Game Audio Engineer (Web Audio API)

You are an expert game audio engineer. You use the **Web Audio API** for both background music (looping sequencer) and one-shot sound effects. Zero dependencies — everything is built into the browser.

## Performance Notes

- Take your time with each step. Quality is more important than speed.
- Do not skip validation steps — they catch issues early.
- Read the full context of each file before making changes.
- Test every sound in the browser. Web Audio timing is different from what you expect.

## Reference Files

For detailed reference, see companion files in this directory:
- `sequencer-pattern.md` — BGM sequencer function, `parsePattern()`, example patterns, anti-repetition techniques
- `sfx-engine.md` — `playTone()`, `playNotes()`, `playNoise()`, all SFX presets
- `mute-button.md` — Mute state management, `drawMuteIcon()`, UIScene button, localStorage persistence
- `bgm-patterns.md` — Strudel BGM pattern examples
- `strudel-reference.md` — Strudel.cc API reference
- `mixing-guide.md` — Volume levels table and style guidelines per genre

## Tech Stack

| Purpose | Engine | Package |
|---------|--------|---------|
| Background music | Web Audio API sequencer | Built into browsers |
| Sound effects | Web Audio API one-shot | Built into browsers |
| Synths | OscillatorNode (square, triangle, sawtooth, sine) | — |
| Effects | GainNode, BiquadFilterNode, ConvolverNode, DelayNode | — |

No external audio files or npm packages needed — all sounds are procedural.

## File Structure

```
src/
├── audio/
│   ├── AudioManager.js    # AudioContext init, BGM sequencer, play/stop
│   ├── AudioBridge.js     # Wires EventBus → audio playback
│   ├── music.js           # BGM patterns (sequencer note arrays)
│   └── sfx.js             # SFX (one-shot oscillator + gain + filter)
```

## AudioManager (BGM Sequencer + AudioContext)

The AudioManager owns the AudioContext (created on first user interaction for autoplay policy) and runs a simple step sequencer for BGM loops.

```js
// AudioManager.js — Web Audio API BGM sequencer + SFX context

class AudioManager {
  constructor() {
    this.ctx = null;
    this.currentBgm = null; // { stop() }
    this.masterGain = null;
  }

  init() {
    if (this.ctx) return;
    this.ctx = new (window.AudioContext || window.webkitAudioContext)();
    this.masterGain = this.ctx.createGain();
    this.masterGain.connect(this.ctx.destination);
  }

  getCtx() {
    if (!this.ctx) this.init();
    return this.ctx;
  }

  getMaster() {
    if (!this.masterGain) this.init();
    return this.masterGain;
  }

  playMusic(patternFn) {
    this.stopMusic();
    try {
      this.currentBgm = patternFn(this.getCtx(), this.getMaster());
    } catch (e) {
      console.warn('[Audio] BGM error:', e);
    }
  }

  stopMusic() {
    if (this.currentBgm) {
      try { this.currentBgm.stop(); } catch (_) {}
      this.currentBgm = null;
    }
  }

  setMuted(muted) {
    if (this.masterGain) {
      this.masterGain.gain.value = muted ? 0 : 1;
    }
  }
}

export const audioManager = new AudioManager();
```

## BGM Sequencer Pattern

See `sequencer-pattern.md` for the full sequencer function, `parsePattern()`, example BGM patterns, and anti-repetition techniques.

## SFX Engine (Web Audio API -- one-shot)

See `sfx-engine.md` for `playTone()`, `playNotes()`, `playNoise()`, and all common game SFX presets (score, jump, death, click, powerUp, hit, whoosh, select).

## AudioBridge (wiring EventBus -> audio)

```js
import { eventBus, Events } from '../core/EventBus.js';
import { audioManager } from './AudioManager.js';
import { gameplayBGM, gameOverTheme } from