ブラウザ × MIDI？Web MIDI APIを使ってMIDIデバイスの入力を取ってみよう

店長

2015.11.16

こんにちは、店長です。

今回はWeb MIDI APIと、それを使って入力を取得する方法を解説したいと思います。まだまだ対応ブラウザは少ないですが、意外と簡単に扱うことができるので、ぜひ試してみてください。

Web MIDI APIとは

MIDIとは電子楽器の演奏データを機器間でやりとりするための世界規格のことです。

MIDI（ミディ、Musical Instrument Digital Interface）は、日本のMIDI規格協議会（JMSC、現在の社団法人音楽電子事業協会）と国際団体のMIDI Manufacturers Association (MMA) により策定された、電子楽器の演奏データを機器間でデジタル転送するための世界共通規格。
MIDI – Wikipedia

Web MIDI APIはMIDIデバイスとブラウザ間で通信をおこなうことができるAPIです。使用しているパソコンにMIDIデバイスを接続すれば簡単に利用することが可能です。

Web MIDI API
Web MIDI API (日本語訳)

MIDIデバイスというと音楽のイメージがあるかもしれませんが、キーボード以外にもさまざまなコントローラーがあります。キーボード以外による物理的な入力を簡単に使用できるため、使ってみると面白いです。

ちなみに、Web MIDI APIはまだChromeのみでの実装となっているため、使用する際は注意してください。今後に期待しましょう！

今回はMIDIデバイスに接続をして入力を取得するまでをおこなってみました。

var midi;

//通信成功時
function success(midiAccess){
	midi = midiAccess;
	console.log("MIDI READY");
    setInputs(midiAccess);
}

//通信失敗時
function failure(msg){
	console.log("MIDI FAILED - " + msg);
}

//MIDIAccessオブジェクトのInputsを取得してイベントに対して関数を渡す
function setInputs(midiAccess){
	var inputs = midiAccess.inputs;
	inputs.forEach(function(key,port){
        console.log("[" + key.state + "] manufacturer:" + key.manufacturer + " / name:" + key.name + " / port:" + port);
		key.onmidimessage = onMidiMessage;
	});
}

//MIDIデバイスからメッセージが送られる時に実行
function onMidiMessage(event){
    console.log(event);
	var str = '';
    for (var i = 0; i < event.data.length; i++) {
        str += event.data[i] + ':';
    }
	console.log(str);
}

//MIDIデバイスへアクセスする
navigator.requestMIDIAccess()
	.then(success, failure);

実行すると以下のような感じになります。

Yusuke Omiさん(@im0_3)が投稿した動画 – 2015 11月 3 3:21午前 PST

今回はKORGのnanoKONTROL2というMIDIデバイスを使用しました。4,000円と安価で手に入り、つまみやフェーダーを利用することができます。

KORG USB MIDIコントローラー NANO KONTROL2 ナノコントロール2 ブラック

また、KORGのnanoシリーズには他に、コンパクトな鍵盤を搭載したnanoKEY2と、パッドが配置されているnanoPAD2というものもあるので、お好きなものを選んでみてください。

KORG USB MIDIキーボード NANOKEY2 ナノキー 25鍵ブラック

KORG USB MIDIコントローラー NANO PAD2 ナノパッド2 ブラック

もちろん他のMIDIデバイスでも利用可能なので、お持ちの方はぜひ試してみてくださいね。

では、早速見ていきましょう。

MIDIデバイスへアクセスしてみよう

まずはMIDIデバイスをパソコンにつないで、requestMIDIAccessを実行します。

requestMIDIAccess(): MIDIデバイスへのアクセスを試みます。実行するとPromiseオブジェクトが返ってきます。接続が成功すると、MIDIAccessオブジェクトを取得することができます。

var midi;

//通信成功時
function success(midiAccess){
	midi = midiAccess;
	console.log("MIDI READY");
}

//通信失敗時
function failure(msg){
	console.log("MIDI FAILED - " + msg);
}

//MIDIデバイスへアクセスする
navigator.requestMIDIAccess()
	.then(success, failure);

この返ってきたMIDIAccessオブジェクトの中に、接続したMIDIデバイスのさまざまなデータが詰まっています。

入力を取得しよう

MIDIデバイスへのアクセスが成功したら、つぎは入力を取得してみましょう。

MIDIAccessオブジェクトのinputsにMIDIデバイスの入力の情報が入っています。この中には現在使用可能なMIDIの入力ポートが含まれています。それぞれのポートを表すには以下のように記述しましょう。

//MIDIAccessオブジェクトのinputsを取得してイベント付与
function setInput(midiAccess){
	var inputs = midiAccess.inputs;
	inputs.forEach(function(key,port){
        console.log("[" + key.state + "] manufacturer:" + key.manufacturer + " / name:" + key.name + " / port:" + port);
		key.onmidimessage = onMidiMessage;
	});
}

portでは現在接続されているMIDIデバイスのポート番号、keyでは現在接続されているデバイス名や接続状況、また入力イベントの取得などができます。

key.onmidimessageに対して関数を渡すと、MIDIメッセージが送られた際にイベントが発火し、関数を実行することができます。

function onMidiMessage(event){
	var str = '';
    for (var i = 0; i < event.data.length; i++) {
        str += event.data[i] + ':';
    }
	console.log(str);
}

引数にイベントオブジェクトを取ることができ、event.dataでMIDIメッセージで送られたデータの内容を取得することができます。