現在ドラフトになっているWeb MIDI APIを使用してみました。
ドラフトではありますがChromeで使用可能になっているようなので試しにjavascriptからMIDI演奏出来るようなアプリを作成してみました。
https://mizunagikb.github.io/miz_music/
こんな感じです。
作成したのはSMFを読み込んで再生するだけの単純なプレイヤーです。デバッグ機能を兼ねてD3.jsで演奏情報の描画を行っています。
■
Web MIDIを使用するには、はじめにrequestMIDIAccessを実行する必要があるのですが、システムエクスクルーシブを利用したい場合、以下の条件を満たす必要があります。
- 対象のウェブアプリケーションにhttpsでアクセスしている。
- requestMIDIAccess呼び出し時に、sysexをtrueにしている。
- 利用者がMIDIデバイスのフルコントロールを許可している。
1)
1に関してはhttpsが利用できる場所にアプリを配置するだけなのですが、環境によっては手間かもしれません。
自分のアプリはgithub上のweb page機能（githubで作成したリポジトリ毎にブランチをウェブページに見せることが出来ます。）を使用することで解決しています。
SysExは本体初期化やダンプデータを抜き出したり出来るため、利用条件を厳しくしているようです。
2)
2に関しては単に引数を渡すだけです。
navigator.requestMIDIAccess(
{sysex: true}
).then(evt_midi_success, evt_midi_failure);
3)
これは利用者側で有効にしてもらう必要があります。自分で使用する分には許可をすれば良いだけです。
ちなみにこんな画面です。
■
あとは普通にMIDIデータを送り込めば良いのですが、今回はRoland SoundCanvas for iOSを制御してみました。また、送信元がMacですので、以下の接続を試しました。
- Thunderbolt + iRig MIDI 2 + UX16
- Air Play
Air Playを使用するには、SoundCanvas for iOS側のMENUからAir Play / Bluetoothを有効にして、Mac側のAudio MIDI設定からMIDIスタジオを開き、ネットワークでiPhoneと接続をする事で利用可能です。Thunderboltを使用しない為、給電させながら演奏が出来て便利…かと思ったのですが、電波状況によって演奏が安定しない場合がありました。
プログラム作成にはTypeScriptを使用しています。今回は以下の様に分離してみました。
- データ構造
- データ読込処理
- データ再生処理
- データ表示処理（これはデバッグ用）
GitHubにソースコードを置いておきました。
https://github.com/MizunagiKB/miz_music
■
SoundCanvas for iOSを制御していて気になったこと
ノートオンメッセージ(0x90〜0x9F)を同じノート番号に送る（キーオンを二回送信する）と、次回以降のメッセージを正常に受け付けないようです。
普通に処理していれば、キーオンとキーオフはセットで処理されるのですが、キーオンだけの楽器（ドラムとか）や演奏途中で停止させた場合にキーオンだけの状態が発生する事があります。
そもそもキーオンを二回送るというのが良くないのですが、今回作成したプログラムでは、チャンネル毎のキーオン状態を保存しておき、再生停止時にキーオンしたままのノートにキーオフを送るようにしてみました。
なんとなく、自分の作成したプログラム側に問題がありそうですけど。