More than 3 years have passed since last update.

WebでMIDIを記録して保存できるものをつくりました

Last updated at 2020-08-13Posted at 2020-06-21

概要

WebでMIDI入力を受け取って記録し、SMF(Standard MIDI File)の書き出しまで行えるものをつくりました。

動作には以下の条件が必要です。
・Web MIDI API対応のブラウザであること(Can I use)
・MIDI入力ができるデバイス等があること

https://cagpie.net/web-midi-recording/
UIの作りがだいぶアレですが、

1. Web MIDI API start を押すとMIDIデバイスへアクセスを開始し、
- この状態から、繋いだMIDIデバイスから入力を送ると音が出ます(音が出る部分はソースコード的には Sample にあたります)
1. recording start で記録を開始し、 recording stop で終了してSMFの書き出しが走ります。
1. play で書き出したSMFの再生、また download からSMFのダウンロードができます。
- playでの再生は、WebAudioAPIを用いてSMFを再生する PicoAudio.js を用いています。

https://github.com/cagpie/web-midi-recording
記録部分のみを本体としており、音がなる部分は本体に入っていません。
上記のデモは Sample の内容になります。

例えば、
MIDIデバイスとして使用するピアノの真ん中の方の「ミ」の鍵盤を押したとします。
すると、 0x90 0x40 0x7F というMIDIメッセージが送られます。
(このデバイスの接続と、MIDIメッセージの受け取りにWeb MIDI APIを用いています)

このイベント(MIDIメッセージ)を、押したタイミングと一緒に記録しておきます。

最終的に保存する際に、SMF形式にするのですが、
これは、上記のイベントの内容と、それがいつ実行されるか(正確には前回のイベントからの差分時間)の情報を交互に記述します(ざっくり)
それら情報と、ヘッダ情報などを含めれば完成です。

バイナリデータに起こし保存すれば、
DAWやMIDIシーケンスソフトで開いたりすることができます。

おわりです。
Web×MIDI Web×音楽がもっと見られますように