ブラウザがシンセに!Web MIDI APIにチャレンジ

ブラウザがシンセに!Web MIDI APIにチャレンジ

ブラウザ上からMIDI機器を操作できる「Web MIDI API」。
ブラウザ「Chrome」ではこの機能を使用することができます。
以前からすごーく気になっていた機能なのですが、とうとう試してみることにしました。

★参考文献★
Web MIDI API(原文・英語)
Web MIDI API(日本語訳)

準備:chromeのWeb MIDI APIを有効にする

Web MIDI APIはchrome実装されている機能ではありますが、初期状態では無効化されています。
有効にするためにはchromeを起動して、アドレスバーに下記のおまじないを入力します。

chrome://flags/#enable-web-midi

chromeの設定

すると、chromeの設定画面が現れますので、Web MIDI APIを有効化してchromeを再起動しましょう。

有効後再起動
有効後再起動

Web MIDI APIを使用したアプリ作成

chromeの準備ができたら、普通にjavascriptでコーディングして、chromeでそのページを開きます。
するとまあ不思議、PCに接続しているMIDI機器が認識されますよ♪
試しに作ってみたサンプルがこちら

Web MIDI APIサンプル
Web MIDI APIサンプル

選択したMIDI INからの入力を、選択したMIDI OUTに送りつけるサンプルです。

いろいろな組み合わせで試してみました。

1. IN – iPad(WiFi) | OUT – MOTIF RACK ES(PCに直繋ぎ)
2. IN – iPad(WiFi) | OUT – UM-ONE + MOTIF RACK ES
3. IN – iPad(WiFi) | OUT – UM-ONE + SC-D70
4. IN – iPad(WiFi) | OUT – babyface + KONTAKT5
5. IN – UM-ONE + PCR300 | OUT – UM-ONE + SC-D70

今のところちゃんと音が鳴ったのは1の組み合わせだけでした。
後は、OUTに到達はしている風だけど、うまく受け取れていないのか音は鳴らない状態。

MOTIF RACK ES
MOTIF RACK ES

Web Audio APIを使用すればブラウザから直接音声が鳴らせますし、組み合わせてうまく使えばWebでDAW作成、とかも十分できそうですね。
もう少しいろいろ試してみたいと思います♪