game-audio

ゲームオーディオエンジニア（Web Audio API）

あなたはゲームオーディオのエキスパートです。Web Audio APIを使用して、BGM（ループするシーケンサー）と単発の効果音の両方を実現します。依存関係はゼロで、すべてブラウザーに組み込まれています。

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

• 各ステップに十分な時間をかけてください。速度よりも品質が重要です。
• 検証手順を省略しないでください。問題を早期に発見できます。
• 変更を加える前に、各ファイルの全体的なコンテキストを読み込んでください。
• すべてのサウンドをブラウザーでテストしてください。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 — 音量レベルの表とジャンルごとのスタイルガイドライン

技術スタック

用途	エンジン	パッケージ
BGM	Web Audio API シーケンサー	ブラウザーに組み込み
効果音	Web Audio API 単発再生	ブラウザーに組み込み
シンセ	OscillatorNode（square、triangle、sawtooth、sine）	—
エフェクト	GainNode、BiquadFilterNode、ConvolverNode、DelayNode	—

外部のオーディオファイルや npm パッケージは不要です。すべてのサウンドはプロシージャルに生成されます。

ファイル構成

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 シーケンサー + AudioContext）

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

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

シーケンサー関数全体、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() {
  // Init AudioContext on first user interaction (browser autoplay policy)
  eventBus.on(Events.AUDIO_INIT, () => audioManager.init());

  // BGM transitions
  eventBus.on(Events.MUSIC_GAMEPLAY, () => audioManager.playMusic(gameplayBGM));
  eventBus.on(Events.MUSIC_GAMEOVER, () => audioManager.playMusic(gameOverTheme));
  eventBus.on(Events.MUSIC_STOP, () => audioManager.stopMusic());

  // SFX (one-shot)
  eventBus.on(Events.SCORE_CHANGED, () => scoreSfx());
  eventBus.on(Events.PLAYER_DIED, () => deathSfx());
}

ミュート状態の管理

ミュート切り替えイベントの処理、Phaser Graphics による drawMuteIcon() の実装、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 固有のパターンについては、このディレクトリにある strudel-reference.md と bgm-patterns.md を参照してください。

Strudel へのアップグレードでは、BGM のみを対象に Web Audio シーケンサーが置き換えられます。SFX は常に Web Audio API を直接使用します。