Edited at

Web BluetoothからBluetooth MIDIデバイスを使う


これは何?

Bluetooth MIDIをサポートする機器をWeb Bluetoothを使ってウェブブラウザと接続する方法を、サンプルコード、ライブラリを使って説明します。


Web MIDI APIとどこが違うの?メリットは?


OSとブラウザ、Web MIDI API、Web Bluetoothの関係

Web MIDI APIはW3Cにて標準化が進められているMIDIデバイスとウェブブラウザを接続するためのAPIです。


「MIDIデバイス」をもう少し正確に書くと「USB MIDIデバイス」であり、OSが提供しているMIDIデバイス用のAPIをウェブブラウザがJavaScriptのAPIとして提供している機能です。よって、コンピュータに接続されたUSB MIDIデバイスは、OSに認識されている必要がありますので、現状ではBluetooth MIDIデバイスをコンピュータと接続して利用するにはOS固有のユーティリティを使って事前に接続作業をしておく必要があります。


何がいいの?


Bluetooth MIDI

Bluetooth MIDIの良いところは「MIDIデバイスを無線でコンピュータと接続して利用することができること」だと考えています。ただしメッセージの送信の遅延の問題がありますので利用シーンが選ばれているように感じます。(特にプロユース)


個人的なおもいで

Bluetooth MIDIに関してはNAMM ShowにてMiseluさんから力強い発表をされていたのが心に残っています!2013年か2014年だったと思います。

MiseluさんのおかげでMIDIデバイスが無線になったと個人的には受け止めています。無線大好きな私は心から感謝しております。ありがとうございます!


Web Bluetoothを使ってBluetooth MIDIを使うメリット

先に書いた「OSに認識されている必要がある」の部分が実はかなり面倒で、精通したユーザでないと見たこともないメニューからBluetooth MIDI機器をOSに認識させて接続する必要があるのでエクスペリエンス的にはBadな状態です。しかし、Web Bluetoothを使えばウェブブラウザのみで、Bluetooth MIDI機器の接続・切断が行なえますのでエクスペリエンスがかなり向上します。


デモサイト

まずはユーザとして利用するときの手軽さから体験してみてください。(Bluetooth MIDI機器が必須です・・・:僕の使ってるデバイス

MIDI Message Viewer: デモサイト

Screen Shot 2019-02-20 at 15.32.39.png

Bluetoothのアイコンをクリック/タップすると機器の検索が開始されます。あとはウェブブラウザが出す指示に従えば接続が完了します。


早速コードを書いてみる

「いいことしかないみたいだけど、それ難しいんでしょ?」

と聞こえてきそうだった(というか、自分が何度もコードを書きたくなかった)ので、ライブラリとして使えるようにしました。このライブラリはMIDIのINPUTのにしか現在は対応していないことをご了承ください。

上記のデモのコードはコレ↓です。

MIDI Message Viewr: GitHub

Bluetooth MIDIをWeb Bluetoothで使うための最短+αで書くとコンナカンジ↓になります。


sample_qiita.html

<html>

<head>
<title>Bluetooth MIDI Over Web Bluetooth | Sample Code</title>
<style>
.start-ble {
background-color: #bdbdbd;
border: none;
border-radius: 3px;
color: #ffffff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
outline:0;
}
.connected {
background-color: #4285f4 !important;
}
.message {
width: 400px;
padding: 20px;
}
</style>
</head>
<body>
<button id="start-ble" class="start-ble">Connect BLE MIDI Device</button>
<div id="message" class="message"></div>
<script type="module">
import { BLEMIDIUtils } from "./scripts/blemidiutils.js";
import { MIDIMessageUtils } from "./scripts/midimessageutils.js";

let startButton = document.querySelector("#start-ble");
let msgArea = document.querySelector("#message");

let bleMIDIUtls = new BLEMIDIUtils();
let midiMsgUtls = new MIDIMessageUtils();

bleMIDIUtls.setMIDIParser(midiMsgUtls.parseMIDIMessage.bind(midiMsgUtls));
let state = bleMIDIUtls.getDeviceConnected();
bleMIDIUtls.setnMidiEventHandleCallback( event => {
// MIDIメッセージを受け取るとevent.detailにMIDIメッセージが格納され、
// ここで受け取れますので、実行した動作をここに書くことが可能です。
let out = [];
for(let key in event.detail.property) {
out.push(key + " :: " + event.detail.property[key]);
}
msgArea.innerHTML = out.join("<br />")
});
bleMIDIUtls.setConnectedBleCallback( event => {
// 接続完了時に実行されます。
// 例えば、接続されたことUIに反映させる動作の指定が可能です。
startButton.innerHTML = "Disconnect BLE MIDI Device";
startButton.classList.add('connected');
console.log('[Device Connected]');
});
bleMIDIUtls.setDisconnectedBleCallback( event => {
// 切断完了時に実行されます。
// 例えば、切断されたことUIに反映させる動作の指定が可能です。
startButton.innerHTML = "Connect BLE MIDI Device";
startButton.classList.remove('connected');
msgArea.innerHTML = "";
console.log('[Device Disconnected]');
});
document.querySelector("#start-ble").addEventListener('mousedown', event => {
// 検索開始、切断を行うコードの例です。
// 以下は、ボタンが押されたときに検索開始、切断と同時にボタンの装飾を更新しています。
if(!bleMIDIUtls.getDeviceConnected()) {
bleMIDIUtls.startBle.bind(bleMIDIUtls)(event);
} else {
bleMIDIUtls.endBle.bind(bleMIDIUtls)(event);
}
}, false);
</script>
</body>
</html>


カスタムのウェブアプリの開発はsetnMidiEventHandleCallback() に行いたい動作を書くことで実現可能になっています。


まとめ

簡単にBluetooth MIDI機器をウェブブラウザに接続することができました。ササッとBluetoothでコントロールするアプリを作りたいとかある場合は是非使ってみてください👍