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

WEB開発

今回の顧客からの要望は、パソコン及びタブレットのどちらの機器からでも操作可能とし、 検査対象機器の初期データの設定、基本機能の動作確認を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構成画面に装置名が表示されます。

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

参考サイト
※Bluetooth 4.0/BT LE に非対応の Mac を 4.0 /BT LE 対応にする方法

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”を選択します。

参考サイト
Web MIDI API (日本語訳)
MIDIデバイスの準備不要、Web MIDI APIの基礎
Web MIDI APIを触ってみた
Web MIDI APIを扱うためのMIDI基礎知識
Web MIDIを例にChromeにAPIを追加する手順概要を追ってみる
Web Audio / Web MIDI にまつわる時間管理の話(1) – Webにおける3種類の時刻
SMF (Standard MIDI Files) の構造
SMF(Standard MIDI File)フォーマット解説
DTM技術情報 – 5.SMFフォーマット
SMFプレイヤーをつくろう!リベンジ「セットテンポと分解能」 « なたで日記

コメント

タイトルとURLをコピーしました