@onjmin/dtm
BGM PLAYGROUND (HEADLESS PLAYER)
READY
● BGM MODE | HEADLESS BGM PLAYER | playMML() ◀ BACK TO DAW
► HEADLESS BGM PLAYER API playMML()
🎮 ゲームにシームレスなBGMを組み込よう!
このエリアでは、画面を使わずにBGMを裏側で再生するAPI playMML() の挙動をお試しいただけます。 「イントロ付きループ」や「小節/秒数指定でのループ境界制御」、「サビなど特定の瞬間を検知してゲーム内演出と同期させるイベント(Cues)」など、Webゲーム開発で大活躍する便利な機能を簡単にシミュレートできます。
💡 ※ 読み込み速度を爆速にするため、このデモでは軽量な内蔵シンセ(ピコピコ矩形波)で再生します。ゲーム本番では、好みの音源(SoundFontやWeb Audio音源など)へ自由に変更できます!
MML STRING:
Loop Configuration
START:
END (OPT):
Cues (Checkpoints)
VOLUME:
CONSOLE OUTPUT
Console initialized. Ready to play BGM...
■ Chord Player UI Component mountChordPlayer()
コード進行を入力し、「MOUNT PLAYER」ボタンを押すと専用の再生プレイヤーUIが下にマウントされます。
No player mounted yet.

playMML() API & Usage Guide

🚀 playMML() は、ゲームの裏側でBGMをスマートに鳴らすための「画面なし(ヘッドレス)」再生用APIです!ゲームの進行やインタラクションと音楽をぴったり同期させたいときに威力を発揮します。

■ なぜこれを使うの?(HTML5 Audio等との比較)

やりたいこと 通常のAudioタグなど @onjmin/dtm (playMML)
ズレないループ 曲の終わりと始まりの間にプチッと遅延や隙間ができがち… Web Audio APIのスケジューリングにより、ミリ秒単位で完全にシームレスなループを実現!
イントロ付きループ ファイルを分割して、再生完了を監視してつなぐ複雑な処理が必要… MML文字列を1本渡して、ループ開始位置(小節など)を指定するだけで自動ループ!
音・ビート同期演出 毎フレーム再生時間をチェックする(ズレるし、重い)… 「この小節/ステップを通ったらイベントを呼ぶ」と設定するだけで正確に発火!
音量の共通管理 ゲーム全体の音量コントロールに組み込みにくい… ゲーム側の AudioContext や MasterGain を渡せるので、SEとBGMの音量バランスもバッチリ!

■ 軽い!ロード時間がゼロのピコピコシンセ内蔵

ピアノロール画面(DAW)では音色データ(SoundFont)をロードしますが、playMML() はデフォルトで**ロード不要の超軽量シンセ(矩形波など)**で発音します。これにより、「BGMのロード待ちでゲームの起動が遅れる」「通信量がかさむ」といった問題をクリアできます。

「もっと豪華な音で鳴らしたい!」という時は、以下のように onPlayNoteonPlayDrum フックを使って、自作のシンセやゲーム側のロード済みサウンドエンジンに簡単に差し替えられます。

playMML(mmlString, {
  audioContext: myGameCtx,
  loop: { start: { bar: 2 } }, // 2小節目からループ
  onPlayNote: (e) => {
    // 鳴らしたい音色エンジンをここに繋ぐだけ!
    mySynth.trigger(e.pitch, e.volume, e.when, e.duration);
  }
});