Web楽器をMIDI鍵盤やDAWから鳴らす方法
最近はウェブブラウザのAudio APIが充実してきて、JavaScriptだけで実装されているウェブ楽器が増えてきました。なかにはかなり本格的な音が出るシンセサイザーなどもあり、そういった楽器をUSB-MIDIキーボードやDAWから鳴らせれば楽しいだろうなと思って以前調べて実現することができました。
g200kgさんの提唱するWebMidiLinkに準拠したウェブ楽器であれば以下の方法で鍵盤やDAWから鳴らすことができます。
■USB-MIDIキーボードからウェブ楽器を鳴らす方法
USB-MIDIキーボードからウェブ楽器を鳴らすには以下のソフトウェアを使います。
Jazz Plugin
MIDIデバイスとブラウザを中継するプラグイン。
これを入れるとJavaScriptからMIDIデバイス信号を取得できるようになります。
Jazz2WML
JazzPluginが検知したMIDI入力をWebMidiLinkの形式にして送信するウェブアプリを作りました。
このブリッジアプリを介することでWebMidiLink対応楽器であればどれでもコントロールできるようになります。
全体の構成は以下のようになります。
Jazz2WMLの中身はこんな感じです。サンプルのコピペなのでよくわかりませんが、こんな風に書くとMidi入力があったときにmidiProcが呼ばれるようです。
function midiProc(t,a,b,c) { var cmd = a >> 4; var channel = a & 0xf; if ( cmd==8 || ((cmd==9)&&(c==0)) ) { if (b == lastNote) { wml.NoteOff(b); lastNote = -1; } } else if (cmd == 9) { var noteNumber = b; if (noteNumber >= 0) { wml.NoteOn(noteNumber, c); lastNote = b; } } }
sel=document.getElementById("midiIn"); try{ current_in=Jazz.MidiInOpen(0,midiProc); var list=Jazz.MidiInList(); for(var i in list){ sel[sel.options.length]=new Option(list[i],list[i],list[i]==current_in,list[i]==current_in); } } catch(err){}
ベロシティを一定にしたい場合は上記の
wml.NoteOn(noteNumber, c);
を
wml.NoteOn(noteNumber, 100);
みたいにすると良い感じです。
wml.NoteOnの中身はこんな感じ。WebMidiLinkの仕様にしたがってPostMessageで楽器アプリウィンドウ宛に送っています。
this.NoteOn = function(n, v) { this.SendMessage("midi,90,"+n.toString(16)+","+v.toString(16)); }
■DAWからWeb楽器を鳴らす方法
DAWから鳴らす場合は、ノートオン情報の送り先になる仮想MIDIデバイスを用意する必要があります。
Windowsの場合は、以下のソフトウェアを使用します。
MIDI Yoke
仮想のMIDIデバイスを作るソフトウェア
MacはOSの機能で、「Audio MIDI設定」からIACドライバを設定すればできそうです。(未確認)
仮想デバイスができたら、たとえば以下のようにDAWのMIDI設定で出力先ポート番号をMIDI Yokeのポート番号にあわせます。
全体構成はこんな感じ。
いろいろと環境に依存する部分もあり、うまく動かなかったらすみません。
このへんの技術は現在策定されつつあるWeb MIDI APIにも関わるところなのでこの先どんどん進歩していくと思います。Web MIDI APIはまだブラウザに実装されてはいませんが、JazzPluginを使ったシミュレータがあるようで、Ryoya KAWAIさんの作られたサンプルページでは今回のエントリーのようにUSB-MIDIキーボードから音を鳴らすことができます。
Web Music Developers JP Advent Calendar 2012 (16日目)