Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

これは何?

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でコントロールするアプリを作りたいとかある場合は是非使ってみてください👍

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした