Web MIDI APIの使い方

Web MIDI APIを使うためのjavascriptを下に示します。MIDIを扱うGlobal Object、midiを生成します。navigator.requestMIDIAccessの行です。その際に、system exclusiveを使うかどうかの設定を行います。system exclusiveを使う場合はsysex: trueとします。Objectが生成された場合はonMIDISuccessへ飛びます、また失敗した場合はonMIDIFailureへ飛びます。

onMIDISuccessでは、入力ポートinputsを出力ポートoutputsに情報を獲得します。if文は古いAPIと新しいAPI、どちらにも対応できるような定番の記載です。MIDI入力ポートは、まずポート名前をコンソールに表示し、MIDI入力を受けた時のコールバック関数をonmidimessageに設定します。

出力ポートについても、その名前をコンソールに表示し、ノートオンをoutput.sendの行で送っています。

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

window.onload = function() {
// sysex: false ---> System Exclusive を使わない時
// sysex: true  ---> System Exclusive を使う時
// onMIDISuccess ---> request が成功し、MIDIが使える時のコールバック関数
// onMIDIFailure ---> request が失敗し、MIDIが使えない時のコールバック関数
// ただし、Internet ExplorのようにWeb MIDI APIに対応していないブラウザーの場合、
// navigator.requestMIDIAccess関数が無い、というエラーになり
// onMIDIFailureへは飛びません。
navigator.requestMIDIAccess( { sysex: false } ).then( onMIDISuccess, 
        onMIDIFailure );
};

// 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 入力ポートの情報表示
    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を送る
    }
// <--- ここまで
}//else}

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

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