mcpField
A
add-audio

add-audio

github.com/playableintelligenceクリエイティブ・メディア3501.0k 回インストール22 週間前に更新
リポジトリ

add-audio について

既存のブラウザーゲームに合成音楽と効果音を加えるスキルです。音声ファイルや npm パッケージを使わず、Web Audio API で音を生成し、ゲームイベントに接続する手順を示します。

主な機能

  1. 01ループする BGM の合成
  2. 02一度だけ鳴る効果音の生成
  3. 03ゲームイベントへの音声接続
  4. 04ミュート切り替えの追加
  5. 05ビルドによる変更確認

活用シーン

  1. 01ゲームシーンにループ BGM を追加
  2. 02ジャンプ、得点、死亡時に効果音を再生
  3. 03ミュートボタンとキーボード操作を追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/playableintelligence/game-creator --skill add-audio

インストール後、Claude Code で/add-audioを入力して読み込まれたか確認します。

詳細

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

  • 時間をかけて、徹底的に作業してください
  • 速度より品質を重視してください
  • 検証手順を省略しないでください

オーディオを追加する

既存のゲームに、プロシージャル生成の音楽と効果音を追加します。BGMには、パターンをループ再生する Web Audio API のステップシーケンサーを使用します。効果音には Web Audio API を直接使用し、1回限りの再生を実現します。オーディオファイルも npm パッケージも必要ありません。すべてブラウザー上で合成されます。

手順

$ARGUMENTS に指定されたゲーム（パスが指定されていない場合は現在のディレクトリ）を分析します。

まず、ゲームオーディオのスキルを読み込み、Web Audio のパターンと統合ガイドの全体を確認します。

ステップ 1：監査
  • src/core/EventBus.js を読み、ゲーム内にどのようなイベント（フラップ、スコア、死亡など）があるか確認します
  • すべてのシーンファイルを読み、ゲームの流れ（ゲームプレイ、ゲームオーバー）を理解します
  • ゲームのジャンルや雰囲気に合う音楽と効果音を特定します
ステップ 2：計画

追加するオーディオの計画を表にまとめます。

イベント／シーンオーディオの種類スタイル説明
GameSceneBGMチップチューン明るい矩形波のメロディー＋ベース＋ドラム
GameOverSceneBGM物悲しいゆっくりと下降するメロディー
プレイヤーのアクション効果音レトロ素早いピッチスイープ
スコア効果音レトロ2音のディン音
死亡効果音レトロ下降する潰れた音符

平易な英語で、次のように説明します。「各シーンでバックグラウンドミュージックが自動的にループします。ジャンプ、スコア獲得、死亡などのアクションに応じて効果音が再生されます。最初にクリック／タップすると、オーディオシステムが有効になります（ブラウザーでは、音声を再生する前にユーザー操作が必要です）。」

ステップ 3：実装
  1. src/audio/AudioManager.js を作成します。AudioContext の初期化、マスターゲインノード、BGM シーケンサーの再生／停止を実装します
  2. src/audio/AudioBridge.js を作成します。EventBus のイベントを AudioManager に接続して BGM を制御し、効果音関数を直接呼び出します
  3. 各シーン用の BGM パターンを含む src/audio/music.js を作成します（Web Audio のステップシーケンサー。連続ループする音符配列を使用）
  4. 各イベント用の効果音を含む src/audio/sfx.js を作成します（Web Audio API を使用し、OscillatorNode + GainNode + BiquadFilterNode によって1回限りの再生を実現）
  5. EventBus.js にオーディオイベントがなければ追加します（AUDIO_INIT、MUSIC_GAMEPLAY、MUSIC_GAMEOVER、MUSIC_STOP、AUDIO_TOGGLE_MUTE）
  6. main.js で initAudioBridge() を接続します
  7. 初回のユーザー操作時に AUDIO_INIT を発行します（メニューなしでゲームがすぐに始まります）
  8. シーン遷移時に音楽イベントを、ゲーム内のアクション時に効果音イベントを発行します
  9. ミュート切り替えを追加します。AUDIO_TOGGLE_MUTE イベント、UI ボタン、M キーのショートカットを実装します
ステップ 4：検証
  • npm run build を実行し、エラーがないことを確認します
  • 作成／変更したファイルをすべて一覧表示します
  • ユーザーに「1回クリック／タップしてオーディオを有効にすると、音楽が聞こえるようになります」と伝えます

使用例

オーディオを一通り追加する
/add-audio examples/flappy-bird

結果：src/audio/AudioManager.js、music.js（ゲームプレイとゲームオーバーの BGM パターン）、sfx.js（フラップ、スコア、死亡、ボタンの効果音）を作成し、AudioBridge で接続します。M キーでミュートを切り替えられます。最初のクリックでオーディオが有効になります。

トラブルシューティング

音が再生されない

原因： ユーザー操作後に AudioContext が再開されていません（ブラウザーの自動再生ポリシー）。 対処法： 初回のユーザー入力（クリック／タップ／キー押下）時に AudioContext.resume() が呼び出されることを確認してください。AUDIO_INIT イベントが接続されているか確認してください。

オーディオによって一時的に処理が遅くなる

原因： フレームごとに新しい OscillatorNode を作成しています。 対処法： 効果音は1回限りの再生にします（作成、接続、開始、停止）。BGM には単一のループシーケンサーを使用します。update() 内でノードを作成しないでください。

次のステップ

ユーザーに次のように伝えます。

ゲームに音楽と効果音が追加されました。次に /game-creator:qa-game を実行し、ゲームが正しく起動すること、シーンが適切に遷移すること、スコアが正常に機能すること、ビジュアルが壊れていないことを確認する自動テストを追加してください。

パイプラインの進捗： /viral-game → /design-game → /add-audio → /qa-game → /review-game

（これは /viral-game のワンショットパイプラインです。複数のセッションにわたってマイルストーンごとに進める /make-game のワークフローではありません。）

コメント

Markdown 対応