概要・目的
昔、仕事の関係で、AUDIO,MIDI関連の仕事をしている影響で、以下のような記事を見つけました。
ここで使われているweb MIDI APIを使えば、楽にaudioやmidi用のテストアプリを作れたため、それに関してここに残しておこうかと思います。
最終的にraspberry pi+USBキーボード+小型モニタでシンセサイザーみたいなものを作れたらなと思っています
web MIDI apiとは
まず、web MIDI apiとは、webブラウザを介して、MIDIデバイス(USBキーボード・オーディオインターフェイス・電子楽器等)と通信を行うためのAPIです。
要は、webブラウザを操作することでMIDIデバイスを操作したり、MIDIデバイスを操作することでwebブラウザを介して音を鳴らしたりすることを可能にします。
そもそもMIDIとは
簡単に言ってしまえば、MIDIとは演奏情報のことになります。
wavファイルやmp3ファイルなどには曲そのものが入っているのに対し、midiファイルにはその曲の演奏情報が入っています。ですので、midファイルは再生させる機械によって顕著に音が変わったりします。
ちなみに、MIDIデータを使う理由として、wavデータやmp3データよりもmidiデータの方が格段にサイズが小さいことと、システムエクスクルーシブメッセージというのを利用することで演奏情報以外のデータのやり取りも可能になることがあるかと思います(他にも利点はあるかと思います)。
環境作成
必要なソフトウェアは以下の二つです。リンク先からインストールしてください
(google chrome以外のブラウザでも使用可能かとは思いますが、確認していません)
また、以下のリンク先から、web MIDI api用のソースコードを入手します。
https://github.com/ryoyakawai/x-webmidi/archive/0.10.23.zip
【追記】現状、chromium 系統のブラウザでしか動かないようです(@nagtkk さん、ご指摘ありがとうございます)
https://caniuse.com/#feat=midi
実装
(javascriptの勉強不足にて、後々に更新予定。)
起動方法
まず、vscodeを開き、「拡張機能」、もしくは「extension」(下図の青で囲まれたアイコン)をクリックし、「Live Server」(下図の赤で囲まれたコンテンツ)ををインストールしてください
次に、入手した「midiPlayground」フォルダをvscodeで開き。「src」フォルダにある「keyboard.html」を右クリックします。
そうすると、下図のようにウインドウが出るので「Open with Live Server」をクリックします。
これで、google chromeが開き、アプリケーションが開かれます。
実際の起動画面
実際の起動画面は以下になります。
キーボードの箇所をクリックすることで音がなるかと思います。また、「Program」の赤色のバーを動かすことで、キーボードを押した時の音が変わります(MIDIでいうプログラムチェンジメッセージを出します)。
成果物
今回作成したものを、以下のリンク先においています。ご自由にお使いください。
https://github.com/tomsWalker/webAPP/tree/master/midiPlayground
参考文献