Web MIDI APIの使い方

Web MIDI APIを使うためのjavascriptを下に示します。 まず、MIDIを扱うGlobal Object midiと、 入力ポート、出力ポートをそれぞれ保持するためにinputsとoutputsを生成します。

<script>
var midi 	=null;    // MIDIAccessのglobal object
var inputs	=null;    // MIDI 入力ポート
var outputs	=null;    // MIDI 出力ポート

windowsが開かれた時（WebページのHTML、画像、スタイルシート、フレームなど、全ての要素が完全に読み込 まれた後）に呼ばれる関数、window.onloadの中でMIDI APIの準備を行う関数 navigator.requestMIDIAccessを呼び出します。

window.onload = function() {
// sysex: false ---> System Exclusive を使わない時
// sysex: true  ---> System Exclusive を使う時
// onMIDISuccess ---> request が成功し、MIDIが使える時のコールバック関数
// onMIDIFailure ---> request が失敗し、MIDIが使えない時のコールバック関数

navigator.requestMIDIAccess( { sysex: false } ).then( onMIDISuccess, 
        onMIDIFailure );
};

navigator.requestMIDIAccessを呼び出す際、system exclusiveを使うかどうかの設定を行います。 system exclusiveを使う場合はsysex: trueとします。

navigator.requestMIDIAccessの実行の結果、 Objectが生成された場合はonMIDISuccessへ飛びます、 また失敗した場合はonMIDIFailureへ飛びます。 ただし、Internet ExplorのようにWeb MIDI APIに対応していないブラウザーの場合、 navigator.requestMIDIAccess関数が無い、というエラーになり onMIDIFailureへは飛びません。

リクエストが成功した時に呼ばれるonMIDISuccesseの中で if (typeof midi.inputs == "function")文は 古いAPIと新しいAPIの分岐で、両方で使えるようにそれぞれの入出力の獲得方法が書かれています。 その中で、onMIDISuccessでは、入力ポートinputsを出力ポートoutputsに情報を獲得します。

// request が成功し、MIDIが使える時のコールバック関数
function onMIDISuccess( midiAccess ) {
    alert( "MIDI ready!" );    //MIDIが使える時に表示される。
// requestが成功すると、midiAccessに、global objectが入っているので、
// 保存しておきます。
    midi = midiAccess;
// MIDI の入出力ポートの情報を保存しておきます。
// ここから ---> 
    if (typeof midi.inputs == "function") {
        inputs=midi.inputs();
        outputs=midi.outputs();
    } else {
        var inputIterator = midi.inputs.values();
        inputs = [];
        for (var o = inputIterator.next(); !o.done; 
            o = inputIterator.next()) {
                inputs.push(o.value)
        }
        var outputIterator = midi.outputs.values();
        outputs = [];
        for (var o = outputIterator.next(); !o.done; 
            o = outputIterator.next()) {
                outputs.push(o.value)
        }
    }
// MIDI の入出力ポートの情報を表示します。
    viewMIDIport();
}

次の関数で、MIDIの入出力ポートの数と名前を表示します。 MIDI入力ポートは、まずポート名前をコンソールに表示します。 さらに、MIDIの入力を受けた時のコールバック関数をonmidimessageに設定します。 出力ポートについても、その名前をコンソールに表示し、 ここでは送信のテストとしてノートオンをoutput.sendの行で送っています。

 // MIDI 入力ポートの情報表示
function viewMIDIport()
{
    console.log("inputs number=",inputs.length);     //入力ポートの数
    for(var i=0; i>inputs.length;i++){
        var input=inputs[i];
    //MIDI入力を受けたときのコールバック関数
        inputs[i].onmidimessage = handleMIDIMessage;
        console.log(input.name);
    }
    // MIDI 出力ポートの情報表示
    console.log("outputs number=",outputs.length);     //出力ポートの数
    for(var i=0; i<outputs.length;i++){
        var output=outputs[i];
        console.log(output.name);
        output.send([0x90,0x40,0x40],0);     //Note Onを送る
    }
}

onMIDIFailureはりクエストが失敗した時に呼ばれる関数です。

// request が失敗し、MIDIが使えない時のコールバック関数
function onMIDIFailure(msg) {
    //MIDIが使えない時に表示される。
	alert( "Failed to get MIDI access - " + msg );
}

handleMIDIMessage(event)はMIDIを受けたときのコールバック関数です。 上のviewMIDIport()の中で、入力ポートのonmidimessageに設定しています。

// MIDI を受けたときのコールバック関数
function handleMIDIMessage( event ) {
    console.log(event);
}
</script>