Web MIDI APIを使ってみる
Web MIDI APIとは
Web MIDI APIとは、ブラウザとMIDI機器をつなぐものです。
HTML5の一部として、策定が進められています。
2013年10月13日現在
現在実装しているブラウザはGoogleChromeのMac版のみです。
他のブラウザでも,Jazz-puluginというのを使えばMIDI機器をつなげるようになるらしいです。
使ってみる
http://www.w3.org/TR/webmidi/
大体はここを見ればわかります。
とりあえずこんなかんじに書いてみました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Web Midi API TEST</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ var midi = null; var inputs =null; navigator.requestMIDIAccess().then( onMIDISuccess, onMIDIFailure); function onMIDISuccess(midiAccess) { console.log( "MIDI ready!" ); midi = midiAccess; inputs = midi.inputs() if(inputs.length==0){ $("#info").append("<p>利用可能なMIDIデバイスが見つかりませんでした</p>"); }else { for( var i=0; i<inputs.length; i++){ $("#device").append('<option value="'+ i +'">' + inputs[i]["name"] + '</option>'); } } } function onMIDIFailure(msg) { console.log( "Failed to get MIDI access - " + msg ); } function onMIDIMessage( event ) { console.log(event); var str = "MIDI message received [" + event.data.length + " bytes]: "; for (var i=0; i<event.data.length; i++) { str += "0x" + event.data[i].toString(16) + " " ; } console.log(str); } $("#device").on("change", function(){ var port = $("#device option:selected").val(); console.log(port); inputs[port].onmidimessage = onMIDIMessage; }); }); </script> </head> <body> <h1>Web Midi API TEST</h1> <div id="info"></div> <select id="device"> <option>選択してください</option> </select> </body> </html>
MIDI機器からの入力を受け取って、console.logで出力しています。
実際にMIDI機器をつないで、信号を送ったりすると、
MIDI message received [3 bytes]: 0x90 0x3c 0x60 MIDI message received [3 bytes]: 0x80 0x3c 0x40
というようなログが出力されます。
1バイト目は メッセージの種類
2バイト目は ノート番号
3バイト目は ベロシティ
です。
1バイト目のメッセージの種類というのは
0x90ならノートオン(キーボードを押した時)
0x80ならノートオフ(キーボードを話した時）
といったようなものです。
２バイト目はノートの番号です。
一般的にピアノであれば中央の「ド」の音が0x3c (60)になると思います。
３バイト目はベロシティです。
音の強弱の情報で、
1~127の間で、高いほうが強い音となります。
実際に作った確認のページはこちら
http://mintsu-dev.com/webmidiapitest/
