Web MIDI APIを使ってみました

現在ドラフトになっているWeb MIDI APIを使用してみました。

ドラフトではありますがChromeで使用可能になっているようなので試しにjavascriptからMIDI演奏出来るようなアプリを作成してみました。

https://mizunagikb.github.io/miz_music/

mizmusic こんな感じです。

作成したのはSMFを読み込んで再生するだけの単純なプレイヤーです。デバッグ機能を兼ねてD3.jsで演奏情報の描画を行っています。

Web MIDIを使用するには、はじめにrequestMIDIAccessを実行する必要があるのですが、システムエクスクルーシブを利用したい場合、以下の条件を満たす必要があります。

  1. 対象のウェブアプリケーションにhttpsでアクセスしている。
  2. requestMIDIAccess呼び出し時に、sysexをtrueにしている。
  3. 利用者がMIDIデバイスのフルコントロールを許可している。

1)

1に関してはhttpsが利用できる場所にアプリを配置するだけなのですが、環境によっては手間かもしれません。

自分のアプリはgithub上のweb page機能(githubで作成したリポジトリ毎にブランチをウェブページに見せることが出来ます。)を使用することで解決しています。

SysExは本体初期化やダンプデータを抜き出したり出来るため、利用条件を厳しくしているようです。

2)

2に関しては単に引数を渡すだけです。

3)

これは利用者側で有効にしてもらう必要があります。自分で使用する分には許可をすれば良いだけです。

chrome_mididevice ちなみにこんな画面です。

あとは普通に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)を同じノート番号に送る(キーオンを二回送信する)と、次回以降のメッセージを正常に受け付けないようです。

普通に処理していれば、キーオンとキーオフはセットで処理されるのですが、キーオンだけの楽器(ドラムとか)や演奏途中で停止させた場合にキーオンだけの状態が発生する事があります。

そもそもキーオンを二回送るというのが良くないのですが、今回作成したプログラムでは、チャンネル毎のキーオン状態を保存しておき、再生停止時にキーオンしたままのノートにキーオフを送るようにしてみました。

なんとなく、自分の作成したプログラム側に問題がありそうですけど。