#webmidi

お世話になっております。okuharaです。

先日、SJ-AWARD 2015という、一年に一度の社内イベントが開催されまして、 その中の余興の一つ、大喜利同好会による大喜利イベント「SJ OGR」のリアルタイム投票システムを実装しました。

※SJ OGRの様子。オモシロ回答を考える回答者の皆さん。ブルーシートとスクリーンにDIY精神があふれています。

リアルタイム投票システム

各回答者の回答に対してオーディエンスが面白いと思ったらスマホ上のボタンを押しまくり、 回答者ごとに押された回数の集計がリアルタイムにスクリーンに表示されるものです。 HTMLとNode.js(socket.io)にて実装しました。 socket.ioの使い道としては、よくありがちな使い方だと思います。

特に特筆するポイントもなく実装完了したのですが、 司会者が回答者を切り替える時に物理的なボタンが使えると良いなーと思い、 Web MIDI APIを使ってみることにしました。

ブラウザとMIDI

@okuparaが投稿した動画 - 2015 6月 30 5:05午前 PDT

5月にリリースされたchrome43でchromeはWeb MIDI APIに正式対応し、 chrome://flagsなどでフラグを立てなくても普通に使えるようになりました。 (※こちらのシステムは4月末に作ったもので、当時まだ正式対応ではなかったせいかMIDIコントローラの認識が非常に不安定で、実は本番時も急に認識しなくなりました・・ 正式対応以降は結構安定して使えている印象です・・！！)

実装例

以下、MIDI部分の処理を抜粋したコードです。

<script> //MIDIデバイス初期化 navigator.requestMIDIAccess({sysex:true}) .then(function (midi) { var activeNoteNumber = 0; var midiout = null; var buttonNoteNumbers = [9, 10, 11, 12, 25, 26, 27, 28]; midi.inputs.forEach(function (el) { //Launch Control のみ処理 if (el.name != "Launch Control") { return; } //MIDIに入力があったときのイベントハンドラを設定。 el.onmidimessage = function (mes) { var noteNumber = mes.data[1]; var velocity = mes.data[2]; console.log(mes.data); //パッド部分以外の入力と、現在の選択状態のパッドの入力の場合は何もしない。 if (buttonNoteNumbers.indexOf(noteNumber) < 0 || activeNoteNumber == noteNumber) { return; } //現在光ってるパッドのLEDを消す。 midiout.send([144, activeNoteNumber, 0]); //新しく押したパッドのLEDを光らせる。 midiout.send([144, noteNumber, 127]); activeNoteNumber = noteNumber; //DOMのインタラクションなどある場合もこのハンドラ内に書く }; }); midi.outputs.forEach(function (el) { if (el.name != "Launch Control") { return; } midiout = el; //すべてのパッドのLEDを消す。 midiout.send([176, 0, 0]); }); }); </script>

MIDIデバイスの初期化メソッド、navigator.requestMIDIAccessはPromiseを返すので、.then()の中にコールバックを書く事ができます。 ただ、ローカルにあるファイルを直接ブラウザでみる(file://〜)と、

Uncaught (in promise) DOMException: An attempt was made to break through the security policy of the user agent.

というエラーが出てしまいました。 理由はよくわからなかったのですが、webサーバー経由でhttp://〜 で見る分には、このエラーは出ないようです。

また、今回はNovation社のLaunch Controlを使いました。 パッド部分のノートナンバーや、それらのLEDを光らせたり消したりするメッセージはMIDIコントローラごとに違うので、この辺りは仕様書をよくチェックしましょう。

まとめ

このような感じで、Web MIDI APIで簡単にHTMLと物理コントローラが連携できます。 最近のMIDIコントローラはLEDで光るやつが結構あるので、その辺りを組み合わせれば音楽以外の用途でも直感的なインターフェースとしていろいろと使えそうだ、と思った次第です。

よろしくお願いいたします。

The Ableton Push is an awesome piece of hardware. But its greatest strength is also its greatest weakness: It's uncomfortably closely tied to Ableton Live. That being said, it is, indeed, a standard MIDI device and is addressed by Ableton Live by standard MIDI commands. Unfortunately, mostly undocumented, at least officially.

Posts like this do a relatively good job at documenting most of the features, so there's not much left to be desired if you want to use the Push in your own (for example Web MIDI) projects.

After experimenting a bit with the SysEx commands to set the display, I came across a simple, but important addition: You don't actually have to send a full line of text on each update: The sequence actually contains the number of characters you want to send and a horizontal offset:

output.send([240, 71, 127, 21, (24+line_number), 0, (number_of_chars + 1), offset, char_1, char_2 … char_n, 247])

This means, for example, that you can update single display regions relatively quickly. Sending SysEx data takes time and if you have to send less data, you can speed up things. Of course, this means that you have to have some sort of dirty checks, so that you don't end up with garbage on the displays.

Also, important caveat when trying this with Web MIDI on Google Chrome: You need to request SysEx access, which requires elevated permissions. And by that I mean that your code won't work from your local harddisk, or, when loaded over the web, from non-secure connections. What worked for me is loading it over a local web server using "localhost".

A sibling of Digital Synth VRA8