WebMidiLinkで遊んでみた

概要

ブラウザ上で動作するソフトウェア音源をボチボチ見かけるようになりました。g200kgさんの発案したWebMidiLinkは、こういった音源をJavaScriptから制御するための仕様です。あまり難しいことは考えずに手軽に利用できるのが嬉しいところです。
ということで、拙作のJavaScript向け音楽ライブラリをWebMidiLinkに対応させて、SMFを再生してみました。

おさらい

WebMidiLinkの話に入る前に、いくつか関連技術について説明しておきます。

Web Audio API

JavaScriptからオーディオを制御するために導入されたAPIです。W3CでGoogleのChris Rogersを中心に仕様の検討が進められています。現在利用できるブラウザはChromeとSafari 6のみですが、Firefoxも現在着々と実装を進めています。g200kgさんが指摘しているように、ChromeとSafariで若干動作が異なる部分もありますが、基本的には実装をWebKitの中で共有しており、ChromeとSafariでは製品で利用しているWebKitのバージョンが異なるのが主な原因と思われます。

今までもオーディオを制御する事はできたじゃないか、と思われる方もいるかもしれませんが、この仕様の（個人的に）一番嬉しいところは、JavaScriptで直接波形をリアルタイム生成できるところです。つまり、JavaScriptでシンセサイザーを実装したりできるわけです。また、オシレータやフィルタ、ディレイといった基本的な音響処理がコンポーネントとして提供されており、これらを接続して音響プログラムを楽しむこともできます。このあたりはEijiさんのはじめてのWeb Audio APIが参考になると思います。

Web MIDI API

同様にMIDIを制御するために考案中のAPIです。同じくW3Cで仕様が議論されていますが、今のところ実装が存在しません。Editorの1人Chris Wilsonが、最近W3Cのpublic-audioの場でWebKit上で実装を進める意思のある旨を表明しました。

WebMidiLinkはこの仕様とは独立したアイデアで、今すぐに利用できるAPIでもあります。

WebMibiLink

WebMidiLinkについて簡単な仕様の説明とデモを紹介します。

仕様について

g200kgさんが考案した仕様で、Web Audio APIなどを使って作られたブラウザ上で動作するシンセサイザーを接続するための規格です。MIDIを基本としており、この仕様ではMIDI信号をどうやってJavaScript上で表現し、コンポーネント間でやりとりするかが規定されています。g200kgさんの仕様ページが、端的かつ具体的なサンプル付きで非常にわかりやすいため、仕様の具体的な説明は割愛します。

ところで、ソフトウェアで音源を実装する場合、一定サイズのバッファ単位で波形合成を行うため、波形合成のタイミングと再生されるタイミングの時間差は一定になりません。別の言い方をすると、波形合成が1秒ごとに行われた場合は、外部からのMIDI入力も1秒ごとに反映されることになります。この問題を解決するためには、MIDI信号に時間情報を載せてあげるか、ソフトウェア音源の波形合成をなるべく小さい単位で実施してあげる必要があります。WebMidiLinkでは特に時間をケアしていませんので、音源はなるべく小さい単位で合成しないと、カクカクの演奏になってしまいます。

今回試してみた範囲では、時間方向の精度はほぼ気にならないレベルでした。

SMF再生デモ

下の黒い領域にSMF(MID)ファイルを放り込んで下さい。下の枠に表示されているWebMidiLink対応音源で再生されます。利用する音源はドロップダウンメニューから選択できます。標準ではg200kgさんのGMPlayerがロードされています。
* * * * * * * * * * * * * * * *

DRAG SMF FILE TO HERE

---

デモの説明

デモを見て技術的な部分に興味を持った方、ぜひ以下を読んでみて下さい。

ライブラリについて

T'SoundSystemという自前ライブラリのJavaScript版に追加機能としてSMF再生やWebMidiLinkを実装しました。元々はネイティブ実装されてTSSCPなどに使われていた、MML処理系一式＋チップチューンエミュレーションのライブラリです。Google Codeにてソース一式公開しています。

T'SoundSystemでは、MasterChannel、Channel、Playerという概念があります。一番わかり易いのがPlayerで、各種ファイルフォーマットを解析して再生する役目を担います。今回はSMF対応のSmfPlayerを利用します。Channelは音源を表し、Playerにより操作されます。SmfPlayerからの操作を意図したMidiChannelがあったのですが、今回はMidiChannelから派生したWebMidiLinkMidiChannelを用意しました。最後のMasterChannelは波形合成を管理します。波形合成のストリーム管理と合成粒度を制御しつつ、Playerへのタイマーを提供しています。波形合成の粒度をPlayerが求める粒度と一致させることができるので、時間にブレのない演奏を実現します。また、複数のChannelを登録した場合には、ミキサーの役目も担います。WebMidiLinkでは、ソフトウェア音源のみを仮定しているわけではなく、また波形合成も各音源の責任によって行われます。よって、今回はPlayerへのタイマーのみを提供する、TimerMasterChannelを用意しました。

利用の仕方

以下にサンプルコードを掲載しますが、とっても簡単。WebMidiLink対応音源をiframeで埋め込む場合の例を示します。

<iframe id="wml" src="[WebMidiLink対応音源のURL]"></iframe>

// まずはWebMidiLinkMidiChannelを作成します。
// 引数にはMIDI信号を送るためのメッセージポートの口を指定します。
// これにより、受け取った演奏信号をWebMidiLinkに変換して出力します。
var midi = new WebMidiLinkMidiChannel(document.getElementById("wml").contentWindow);

// SmfPlayerを作成し、デフォルト音源として先ほど作成したmidiを登録します。
var smf = new SmfPlayer();
smf.setDevice(SmfPlayer.TRACK_DEFAULT, midi);

// TimerMasterChannelを作成します。
// SmfPlayerのsetMasterChannelで登録してあげると、登録されたMidiChannel
// 全てを指定されたMasterChannelに登録します。
// またPlayerのタイマーとしても自動的にMasterChannelを利用するようにします。
smf.setMasterChannel(new TimerMasterChannel(TimerMasterChannel.MODE_DEFAULT));

// 最後に再生。引数はMIDIデータを含むArrayBufferを与えて下さい。
smf.play(midi_data);

ArrayBufferについて

比較的最近に導入された仕様なので、知らない人向けに簡単に説明しておきますと、要するにJavaScriptで効率的にバイナリを扱うための仕組みだと思って下さい。例えば、Web経由で取得したSMFファイルをArrayBufferとして読み込むためには、以下の様なコードを書きます。簡単ですね！

var xhr = new XMLHttpRequest();xhr.open("get", "foo.mid", true);
xhr.responseType = "arraybuffer";
xgr.onload = function () {
    smf.play(xhr.response);
};
xhr.send(); 

バックグラウンドでの演奏について

このページ上でのデモはTimerMasterChannelの動作モードがMODE_INTERVALになっています。つまり、古典的なsetIntervalを使ってタイマーを実現しているのですが、1つ問題があります。Chromeで実行しているとタブを切り替えた際に演奏が極端に遅くなります。これを回避する方法はいくつかあり、TimerMasterChannelにも実装されています。引数として、MODE_TIMER_WORKERを指定すれば、バックグラウンドじの動作も安定します。MODE_DEFAULTでも現在はMODE_TIMER_WORKERが選ばれるようになっています。

まとめ

以上、駆け足でしたが、Web Audio APIと、それを使ったMIDIベースのソフトウェア音源の取り組みWebMidiLinkを紹介させて頂きました。また、どさくさに紛れて拙作ライブラリのT'SoundSystemも紹介しました。

これをきっかけにブラウザ上での音系アプリ開発に興味を持ってくれる人が1人でもいますように・・・。

なお、この記事はWeb Music Developers JP Advent Calendar 2012の一環として執筆されました。