WebGLでのインタラクティブミュージック用コンポーネントの紹介

この記事は Unityゲーム開発者ギルド Advent Calendar 2023 12月8日の記事です。Unityゲーム開発者ギルドはいいぞ！

すっかり久しぶりのブログですが、最近プログラマの山々田が unity1week などに向けてUnityのWebGL用インタラクティブミュージック向けコンポーネントを作って公開したのでそれを記事にしようと思います。

ソースコード

早速ですがコンポーネントのソースコードはこちらです。

https://gist.github.com/Yamayamada0924/d3fe20835d2e6bb696c82007b5e6de26

MixMusicという名前のコンポーネントで、AudioSourceコンポーネントと似たような感じで使えるようにしています。では、まずこのコンポーネントを使って出来ることを紹介したいと思います。

BGMの縦の遷移
BGMの横の遷移

以上です！…と言っても何のことだか分からないと思いますので説明します。

BGMの縦の遷移

こちらがBGMの縦の遷移の例です。途中から打楽器が追加されたのが分かるでしょうか？こういったような楽器をBGMの途中で増やしたり減らしたりする手法を「縦の遷移」と呼びます。

シームレスな戦闘開始や、乗り物に乗ったときなどに使うことが多いと思います。用意するBGMアセットとしてはそれぞれの楽器パートが別々のBGMが必要になります。この例であれば

バイオリンだけのBGMアセット – IM_test_1_0.wav
打楽器だけのBGMアセット – IM_test_1_1.wav

の2つの全く同じ長さの .wav ファイルを用意しています。

そのファイルをこの画像のように設定しています。起動直後の再生ではバイオリンだけのBGMですが ChangeMode(1); もしくは ChangeMode("WithRythm"); を呼ぶことでバイオリンだけのBGMからバイオリンと打楽器のBGMに1秒かけて変化します。

バイオリンだけのBGMに戻すときは ChangeMode(0);もしくは ChangeMode("Single");を呼んで下さい。

仕組みの説明ですが、MixMusic.cs では2つのBGMを同時に再生し、その音量をコントロールすることで縦の遷移を実現しています。画像の設定では Single というModeがIM_test_1_0だけボリューム最大、WithRythm というModeがIM_test_1_0とIM_test_1_1の両方がボリューム最大となっています。

そのためChangeModeでModeを切り替えることでボリュームが切り替わり、聞こえている .wav の組み合わせが切り替わることでBGMの縦の遷移が実現されています。

BGMの横の遷移

続いて横の遷移の例です。ずっと繰り返していたBGMがあるタイミングをきっかけに次のBGM展開へ進むというものを「横の遷移」と呼びます。この例であれば28秒～40秒くらいの間に何らかのトリガーが発生して、次のBGM展開が繰り返しでなく新しいものになったという形です。

物語の進行に合わせてBGMを進めたりするときに使うことが多いと思います。この例であれば

ゆったりな曲調の曲部分（※1）
ゆったりな曲調の曲部分（※2）
早い曲調の曲部分
早い曲調の曲部分

という順に並んだ1つの .wav ファイル（IM_test_2.wav）を用意しています。それぞれの曲部分の長さは604800サンプルです。この「サンプル」というのは後で説明します。

そのファイルを画像のように設定しています。起動直後はゆったりな曲調だけのBGMでループします。Skip(604800); ChangeLoop(1); もしくは Skip(604800); ChangeLoop("Second"); を呼ぶことでゆったりな曲調のBGMのループを抜け出し、早い曲調のBGMになります。

仕組みの説明の前に、先ほど出てきた「サンプル」の説明をします。サンプルというのは曲の時間の単位で、1秒 = 44100サンプルです（サンプリング周波数が44.1KHzの場合。 .wav ファイルは44.1KHzが多いです）。604800サンプルは秒に直すと約13.7143秒で、これはBPM 70というテンポの曲のちょうど4小節分です。

画像の設定ではLoopsのFirtsがStartが0、Endが604800となっているためにBPM 70のテンポの曲であればちょうど4小節でループします。このループしている部分は※1の部分です。Skip(640800);を呼ぶと曲が4小節分一気に進み、※2の同じ部分を再生します。更にChangeLoop(1); を呼ぶことでFirstのループは無効になりSecondのループが有効になります。結果として最初のループから新たなループへBGMの進行が移ります。

横の遷移の説明は結構難しかったと思うので図も今回作成しました。

これでも理解しづらい部分もあると思いますが、理解の助けになれば幸いです。

補足として「ゆったり」や「速い」が2個続いている理由について説明します。UnityのUpdateの呼び出し頻度ですと、音楽を扱うには荒すぎるためループしたいタイミングより少し遅れてループが実施されることもあります。ただループが遅れたとしても直後に同じ曲部分があるため、ループしたときと全く同じ曲が流せるため音楽としてはずれていない状態となります。

まとめ

インタラクティブミュージック自体は縦の遷移・横の遷移以外にもあります。有名なところですと楽曲にゲームのイベントを合わせるクオンタイズなどです。このコンポーネントを機に是非インタラクティブミュージックの世界に飛び込んでみて下さい。（MixMusic.cs にはクオンタイズ機能はありません）

ちなみに山々田は同日にもう1つ記事を投稿しています。若干毛色が違いますがこちらもサウンド系ですので、気になった方は是非読んでみてください！

WebGLでのインタラクティブミュージック用コンポーネントの紹介

2023年12月8日2023年12月8日