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

Webbluetoothplaying
ウェブブラウザ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を知ったのは、このツイートから。コードも参考にしました。


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

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


M5Stack, BLE-MIDI via WebBluetooth
M5Chorder: BLE Chord Pad Device
M5Stack_BLE-MIDI-Footswitch

コメント