game-audio

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

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

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

• 各手順には十分な時間をかけてください。速度より品質を重視してください。
• 検証手順を省略しないでください。問題を早期に発見できます。
• ファイルを変更する前に、そのファイルのコンテキスト全体を読んでください。
• すべてのサウンドをブラウザーでテストしてください。Web Audioのタイミングは想定と異なることがあります。

参考ファイル

詳しい情報は、このディレクトリにある関連ファイルを参照してください。

• sequencer-pattern.md — BGMシーケンサー関数、parsePattern()、パターン例、繰り返しを抑えるテクニック
• sfx-engine.md — playTone()、playNotes()、playNoise()、すべての効果音プリセット
• 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()、および一般的なゲーム効果音のプリセット（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());
}

ミュート状態の管理

ミュート切り替えイベントの処理、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（オシレーター＋ゲイン＋フィルター）を使った効果音
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が途切れずにループし、効果音が一度だけ再生されて止まり、ミュートですべての音が消えること

重要な注意事項

• 依存関係ゼロ：すべて組み込みの 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 固有のパターンを確認してください。

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