Web Bluetooth / BLE-MIDIをカンタンに試せるウェブアプリを作る

ウェブブラウザChromeで動くやつ。Web Bluetoothを使って。

DIYなBLE-MIDIデバイス（MIDIコントローラー）を作っているのですが、そのテスト中に何度もOSのBluetooth設定をいじる必要があります（ペアリングを繰り返したり、解除したり）。それが面倒なのもあり、作ってみました。OS側ではBluetoothをONにするだけ。あとは、ウェブアプリ側で操作が完了します。MIDIを受信して音を鳴らす機能もあるので、別途シンセやDAWを起動する必要もなし。
ということで、ChromeがサポートするWeb Bluetoothを使ったウェブアプリです。

以前、Web MIDI APIを使ったバージョンを作ったのだけど、WindowsではOS内蔵のソフトシンセにChromeがアクセスできない（昔は対応してた）ので、別の方法を探していたのでした。
使用したシンセはこれです。JavaScriptだけで動きます。CDN使えば、ダウンロードすることもなく使えます。すごい。
g200kg/webaudio-tinysynth: Light-weight GM mapped WebAudio-JavaScript Synthesizer Engine / MIDI Player
また、Web Bluetoothを知ったのは、このツイートから。コードも参考にしました。

Web Music Developers Meetup #3 でLTした『BLE-MIDIをWebBluetoothでつないでみた話』のライブデモ置きました[E:#x1F449]https://t.co/3srSLMKlqe#webmusic https://t.co/oYuHisFOaB

— サスカッチ (@sascacci) 2018年12月23日

この両者をつなげる部分だけを作ったようなもの。あらためて、いつもありがとうございます。

後ほど、デモページを公開します。
公開しました。
BLE-MIDI via WebBluetooth / Synth
まだ、つながったりつながらなかったり。つながったように見えて、正常に送信されてなかったり。うまくいったと思いきや、いったん切断するとまったく繋がらなくなったり。原因がわかりませんが、とりあえず公開してから考える方向で。
デモ動画。
M5Stackは2つのプログラムを使用。上のはコードを鳴らせるwararyoさんのBLEChorder。下のは単音を鳴らすもの（もともとはMIDIフットスイッチ用で、音出しはおまけ）で、自作のBLE-MIDI Footswitch。