ゲームオーディオエンジニア (Web Audio API)

あなたはゲームオーディオエンジニアの専門家です。Web Audio API を使用して、背景音楽（ループシーケンサー）とワンショット効果音の両方を制作します。依存関係ゼロ — すべてブラウザに組み込まれています。

パフォーマンスに関する注意

• 各ステップに十分な時間をかけてください。速度より品質が重要です。
• 検証ステップをスキップしないでください — 問題を早期に発見できます。
• 変更を加える前に、各ファイルの完全なコンテキストを読んでください。
• すべての音をブラウザでテストしてください。Web Audio のタイミングは予想と異なります。

リファレンスファイル

詳細なリファレンスについては、このディレクトリの関連ファイルを参照してください：

• sequencer-pattern.md — BGM シーケンサー関数、parsePattern()、パターン例、繰り返し回避テクニック
• sfx-engine.md — playTone()、playNotes()、playNoise()、すべての SFX プリセット
• mute-button.md — ミュート状態管理、drawMuteIcon()、UIScene ボタン、localStorage の永続化
• bgm-patterns.md — Strudel BGM パターン例
• strudel-reference.md — Strudel.cc API リファレンス
• mixing-guide.md — ボリュームレベル表とジャンル別スタイルガイドライン

テックスタック

用途	エンジン	パッケージ
背景音楽	Web Audio API シーケンサー	ブラウザに組み込み
効果音	Web Audio API ワンショット	ブラウザに組み込み
シンセ	OscillatorNode (square, triangle, sawtooth, sine)	—
エフェクト	GainNode、BiquadFilterNode、ConvolverNode、DelayNode	—

外部オーディオファイルや npm パッケージは不要 — すべての音は手続き的に生成されます。

ファイル構成

src/
├── audio/
│   ├── AudioManager.js    # AudioContext init、BGM シーケンサー、再生/停止
│   ├── AudioBridge.js     # EventBus → オーディオ再生をワイア接続
│   ├── music.js           # BGM パターン（シーケンサーノート配列）
│   └── sfx.js             # SFX（ワンショットオシレーター + ゲイン + フィルター）

AudioManager (BGM シーケンサー + AudioContext)

AudioManager は AudioContext を所有し（最初のユーザーインタラクション時に作成、自動再生ポリシー対応）、BGM ループ用のシンプルなステップシーケンサーを実行します。

// AudioManager.js — Web Audio API BGM シーケンサー + SFX コンテキスト

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 シーケンサーパターン

完全なシーケンサー関数、parsePattern()、BGM パターン例、繰り返し回避テクニックについては、sequencer-pattern.md を参照してください。

SFX エンジン (Web Audio API -- ワンショット)

playTone()、playNotes()、playNoise()、および一般的なゲーム SFX プリセット（score、jump、death、click、powerUp、hit、whoosh、select）のすべてについては、sfx-engine.md を参照してください。

AudioBridge (EventBus -> オーディオをワイア接続)

import { eventBus, Events } from '../core/EventBus.js';
import { audioManager } from './AudioManager.js';
import { gameplayBGM, gameOverTheme } from './music.js';
import { scoreSfx, deathSfx, clickSfx } from './sfx.js';

export function initAudioBridge() {
  // 最初のユーザーインタラクション時に AudioContext を初期化（ブラウザ自動再生ポリシー）
  eventBus.on(Events.AUDIO_INIT, () => audioManager.init());

  // BGM トランジション
  eventBus.on(Events.MUSIC_GAMEPLAY, () => audioManager.playMusic(gameplayBGM));
  eventBus.on(Events.MUSIC_GAMEOVER, () => audioManager.playMusic(gameOverTheme));
  eventBus.on(Events.MUSIC_STOP, () => audioManager.stopMusic());

  // SFX（ワンショット）
  eventBus.on(Events.SCORE_CHANGED, () => scoreSfx());
  eventBus.on(Events.PLAYER_DIED, () => deathSfx());
}

ミュート状態管理

ミュート切り替えイベント処理、drawMuteIcon() Phaser Graphics 実装、UIScene ボタン作成、localStorage 永続化については、mute-button.md を参照してください。

統合チェックリスト

1. src/audio/AudioManager.js を作成 — AudioContext + シーケンサー + マスターゲイン
2. src/audio/music.js を作成 — BGM パターン（ノート配列 + シーケンサー呼び出し）
3. src/audio/sfx.js を作成 — Web Audio API を使用した SFX（オシレーター + ゲイン + フィルター）
4. src/audio/AudioBridge.js を作成 — EventBus イベントをオーディオにワイア接続
5. main.js で initAudioBridge() をワイア接続
6. 最初のユーザークリック時に AUDIO_INIT をエミット（ブラウザ自動再生ポリシー）
7. シーン遷移時に MUSIC_GAMEPLAY、MUSIC_GAMEOVER、MUSIC_STOP をエミット
8. ミュート切り替えを追加 — AUDIO_TOGGLE_MUTE イベント、UI ボタン、M キーショートカット
9. テスト： BGM がシームレスにループ、SFX が一度だけ再生して停止、ミュートですべてのオーディオがサイレント化

重要な注意事項

• ゼロ依存関係： すべてが組み込み Web Audio API を使用しています。オーディオ用の npm パッケージは不要です。
• ブラウザの自動再生： AudioContext はユーザークリック/タップから作成/再開されなければなりません。AUDIO_INIT イベントが対応します。
• ミュート用マスターゲイン： すべてをシングル GainNode でルーティングします。gain.value = 0 を設定するとすべてのオーディオが即座にミュート化されます。
• シーケンサータイミング： ルックアヘッドスケジューラー（100ms 先をスケジュール、25ms ごとにチェック）は、ドリフトなしのサンプル精度タイミングを提供します。これは標準的な Web Audio スケジューリングパターンです。
• 外部オーディオファイルは不要： すべてはオシレーターで合成されます。
• SFX は瞬時： Web Audio API はスケジューラー遅延なしで即座に再生されます。

オプション： Strudel.cc アップグレード

パターン言語サポート付きのより豊かな手続き的 BGM のために、オプションで @strudel/web をインストールできます：

npm install @strudel/web

注意： Strudel は AGPL-3.0 です — これを使用するプロジェクトはオープンソースでなければなりません。このディレクトリの strudel-reference.md と bgm-patterns.md を参照して、Strudel 固有のパターンを確認してください。

Strudel アップグレードは BGM 専用の Web Audio シーケンサーを置き換えます。SFX は常に Web Audio API を直接使用します。