HTML5/JavaScriptでMIDIデータファイルを読み込んで扱える MIDI.js

お気に入りのブログ IDEA*IDEA で紹介されていた HTML5 + JavaScript で MIDI データを扱うコンポーネント MIDI.js が面白そうだったのでここでも紹介。


注意： MIDI.js のサイトを開くと音が鳴るデモが自動再生されます

　MIDI.js は Web アプリから JavaScript で MIDI データを扱うためのコンポーネントパッケージで、github でソースコード一式が公開されています。

MIDI.js のモジュール

MIDI.* が MIDI データ処理を行うメインのクラスで、その他は MIDI とは直接関係がない補助的なクラスが含まれます。

• MIDI.loadPlugin.js
  音色データのロードなどプラグイン全体の再生準備を行います。
  
• MIDI.Soundfont.js
  base64 形式に変換した SoundFont 形式の音色データを読み込みます。
• MIDI.Plugin.js
  MIDI データを1コマンド単位で再生、送信する関数群です。 単音ノート ON/OFF、コードノート ON/OFF、Ch 指定、GM 音色指定などがあります。
• MIDI.Player.js
  MIDI データをストリーミング再生するプレイヤーの操作を行う関数群です。
• Color.js
  RGB のカラーコードを指定した色空間の形式に変換します。
• DOMLoader.script.js
  指定したスクリプトを同期/非同期で読み込むローダーです。
• DOMLoader.XMLHttp.js
  クロスブラウザ対応の XMLHttpd リクエストの送受信を処理します。
• MusicTheory.Synesthesia.js
  ノートを色に変換してマッピングします。

　出力処理は、Chrome の場合は Web Audio API が使われ、Safari や Firefox、IE10 などその他の HTML5 対応ブラウザではブラウザが HTML5 の Audio オブジェクトが使われるようです。
　IE9 は HTML5 の Audio 実装が不十分なため再生はできても音飛びが発生すると思われます。

　その他にも SoundManager2 で Flash を使った再生や、midibridge で Java アプレットを使った再生にも対応しているようです。(動作未確認)

　また、midibridge は JavaScript から Java 経由で MIDI デバイスの入出力が操作できるので、PC につないだ外部 MIDI デバイスを鳴らしたり、外部 MIDI コントローラーから操作したりといったこともできるかもしれません。(動作未確認)

MIDI.js が使われたデモ

MIDI.js のページで紹介されているデモの中からいくつか紹介しておきます。
(Ggoole Chrome での実行を推奨)


&raquo Color Piano
音ゲー風のビジュアルピアノプレイヤーです。
外部 MIDI ファイルの URL を指定して再生することもできます。


&raquo Euphony
こちらは 3D で表示されるビジュアルピアノプレイヤーです。
マウスドラッグで視点をグリグリ変えることができます。


&raquo Simon Says
音感連続記憶ゲームです。クリアするごとに1音ずつ増えていきます。


リアルな楽器音を使いたい場合は音色のサンプルデータファイルを読み込む必要があるので、若干ロードに時間がかかるのがネックではありますが、JavaScript でここまでできるなんてすごいですね。

Web Audio API なら JavaScript で波形を生成して出力できるので、その辺カスタマイズしたりするのも面白いかもしれません。

Web Audio API と Web MIDI API が標準化されて主要ブラウザに実装される日が早く来てほしい…

[関連サイト]
　MIDI.js - Sequencing in Javascript
　SoundManager2
　midibridge
　Web Audio API
　Web MIDI API
　Color Piano
　Euphony
　Simon Says
　IDEA*IDEA