Bluetooth Midiを搭載した楽器を製造するにあたり、出荷検査をブラウザ操作で行いとの依頼があり、CSS+Javaスクリプトで作成したときの備忘録。

javascript

今回の顧客からの要望は、パソコン及びタブレットのどちらの機器からでも操作可能とし、 検査対象機器の初期データの設定、基本機能の動作確認をBluetooth Midi経由で行いたいとのこと。 上記要望に対応するため、ブラウザ経由でBluetooth Midiを制御するJavaスクリプトプログラムを書いてみました。 ……とはいっても、Javaスクリプト、Bluetooth Midiは初経験のため、いろいろなサイトを参考に仕上げてみました。

ソフトウェア仕様

動作環境

(1)パソコン:macOS / ブラウザ :chrome ※windows環境については、悪戦苦闘中。
(2)タブレット:IOSデバイス / ブラウザ :WebMidi

仕様

・内蔵曲(30曲)を選択出来ること。
・内蔵曲(30曲)の再生/停止が出来ること。
・デバイス名の変更が出来ること。
・32鍵分のノートオン情報を個別に送信出来ること。
・内蔵曲の書き換えが出来ること。

Bluetooth Midi接続方法

Mac接続方法

(01)「Audio MIDI 設定」で、「ウインドウ」>「MIDI スタジオを表示」と選択します。

※「Audio MIDI 設定」が見つからないときは、アプリケーション→ユーティリティにあります。

(02)Bluetoothをダブルクリックすると「Bluetooth構成」画面が表示されます。

(03)BluetoothMidi対応楽器の電源を投入します。

(04)Bluetooth構成画面に装置名が表示されます。

(05)Bluetooth構成画面に装置名が表示されます。

装置名を選択し、接続ボタンを押します。

IOSデバイス接続方法

2018年10月時点で、IOSデバイスのchromeでのWeb MIDI APIが動作しないため、WebMidiブラウザを介して接続します。

(01)WebMidiブラウザを起動します。

(02)WebMidi対応サイトのURLを入力します。

※画面右下をスライドするとURL入力画面が現れます

(03)WebMidi設定画面を開きます。(赤丸部分を押す)。

(04)Bluetooth Midi接続画面を開きます。(赤枠部分を押す)。

(05)対象装置とBluetooth Midiを接続します。(赤枠部分を押す)。

(06)表示がNot ConectedからConectedに変われば、接続完了です 。

本ソフトウェア接続方法

(01)本ソフトウェアは起動時にBluetoothMIDI接続確認を行うため、

WebMidiブラウザでBluetoothMIDI接続後、再度画面を更新する必要があります。

(02)OutPortを選択すると、使用できるOutPortが表示されますので、”Bluetooth”を選択します。

参考サイト

コメント