So-net無料ブログ作成
» スポンサーリンク

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 のページで紹介されているデモの中からいくつか紹介しておきます。
(Google Chrome での実行を推奨)


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


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


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


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

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

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

[関連サイト]
 MIDI.js - Sequencing in Javascript
 SoundManager2
 midibridge
 Web Audio API
 Web MIDI API
 Color Piano
 Euphony
 Simon Says
 IDEA*IDEA
nice!(2)  コメント(0)  トラックバック(0)   » カテゴリー:音楽コンテンツ(楽曲再生)
permalink
trackback
このエントリーをはてなブックマークに追加


» スポンサーリンク
DMR

サウンドハウス


nice! 2

コメント 0

コメントを書く

名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 0

トラックバックの受付は締め切りました

iTunes Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





customizeBlog2(); //]]>