Web MIDI APIのMIDIシーケンサー「Ex Midi」

W3Cで策定されている「Web MIDI API」でmidiファイルを再生しようというかなり無謀な計画の産物です。 要するにブラウザ上で動くMIDIシーケンサーです。再生速度(テンポ)も自由に変更出来ます。

もう少し詳しい説明

W3Cで策定されている「Web MIDI API」はブラウザ上でMIDIインタフェースを使えるようにしようという規格です。 これを使うと、JavaScriptからMIDIデバイスへアクセスして音を鳴らすことができます。 ところが、このページを作成した当時は標準のMIDIファイルを読み込んで再生するという方法がありませんでした。 これでは不便だということで、何とかしてMIDIファイルを再生出来る物を作りたい・・・ということで作成されたのが本ページです。

やることはMIDIファイルを解析して読み込み、その指示通りにMIDIメッセージを送るだけ・・・だったのですが、一筋縄ではいきませんでした。 まず、直接再生するのはタイマー精度の都合で難しいので、ファイル読み込み時にいじくって60fps相当のタイミングで再生できるようにしています。 その関係で音を出すタイミングが元ファイルよりも数ミリ秒単位でずれるかもしれません。 その程度ならあんまり問題にはならないと思いますが・・・。
※途中でテンポを変更するmidiファイルは現時点では正常に再生されません。

このページのソースを見ていただけると分かると思いますが、タイマーが安定して動かないのを強引に対処したのでかなり邪悪なコードとなっています。 また、exmidi.jsの所々にVisual Basicっぽい部分が散見されますが、これは元々VB用に作っていたゲーム用MIDI再生ライブラリから強引に移植してきたためこのようになっています。 名前が「Ex Midi」だったり、60fpsだったりするのもその頃の名残です。

タイマー精度はWebKit系の物が一番良いようです。 Opera(旧)もなかなか良いです。 Firefoxはかなり時間にルーズみたいです。 Internet Explorerは10以降でしか動きませんが、タイマーは意外と安定しています。 ただし、60fps以上の精度にはならないみたいなので、目標fps(再生速度)を120fps等にすると派手な調整が行われます。 瞬間最高/最低fpsや平均fpsを観察してみましょう。ものすごくあらぶります。 また、どういうわけかMicrosoft GS Wavetable SW Synth固定になります。

簡単な使い方

まず、MIDIデバイスが「出力先」に表示されていることを確認します。 ない場合はブラウザで許可していないか、対応していないMIDIデバイスの可能性があります。 なぜかWindows標準のMicrosoft GS Wavetable SW Synthが使えない場合があるらしいので、別途MIDIシンセサイザ(VirtualMIDISynth等)を入れないといけないかも知れません。

続いて、ファイル選択で好きなmidiファイルを選択してください。 読み込みに成功すればトラック数がアラートで表示されます。

読み込みに成功したら再生ボタンを押して再生して下さい。

デフォルトでは60fpsで再生できるように調整されますが、「読込速度」の値を変更すると120fpsとかも出来ます。 ただし、ブラウザのタイマー精度以上にはならないのであしからず。

おまけ機能としてMIDIモニタなるものも付けてみました。 さらに、メタイベントの歌詞・テキストも表示できるようにしてみました。

ライセンスなど

大したプログラムではないので、商用非商用に関わらず自由に使ったり改造したり(BASIC臭い部分を掃除するとか)して頂いて結構です。許可も要りません。クレジット表記も要りません。 その代わり、これを使ったことで何らかの問題があっても制作者は一切の責任を負いません。

ひよこラボへ戻る

Web MIDI API を読み込み中...
ファイル選択:
読込速度(fps): 再生速度(fps):
出力先:
目標fps:
瞬間fps:
平均fps:
瞬間最高fps:
瞬間最低fps:
ファイル名:
曲名:
音量:
ループ始点: ループ終点: