ウェブページ上からDAWへ簡単にノート入力できないかというのを考えた。結局 Web MIDI API でできた。わかってから検索すると同様のことをしている人も見つかる。

クリップボードは使えるか

MIDI をコピペする仕様ってあるのだろうか? ウェブ上からコピーできたら便利ではないか → 以下の理由で無理

  • コピペする仕様はなさそう
  • MIDI ファイルとしてコピーしてもトラックにペーストする形で使い勝手がよくない
  • そもそも Web Clipboard API は任意のデータ型は扱えない

MIDI デバイス

Web MIDI API があるので、JavaScript が仮想的にMIDIキーボードとして振舞えば入力できそう。ソフトウェア間のMIDIメッセージのやりとりなので、中継する仮想MIDIデバイスが必要になる。

Mac の場合は仮想 MIDI デバイスが OS 組込みでできるのに対し、Windows にそういった機能はない。

Ableton がいいドキュメントを出している。ここで紹介されている loopMIDI を使うと Windows でも仮想MIDIデバイスをつくれる。

Web MIDI API を使いブラウザから DAW へ入力を行う

Web MIDI API 自体はかなり使うのが簡単で不安になる。適当に出力可能なMIDIポートすべてにメッセージを投げつけるなら以下のようにしてできる。

async function midiDeviceSend(notes) {
	function noteOn(note, velocity) {
		return [0x90, note, velocity];
	}

	function noteOff(note) {
		return [0x80, note, 0];
	}

	const midi = await navigator.requestMIDIAccess();
	const outputs = midi.outputs;

	if (outputs.size === 0) {
		console.log('no output devices are found');
		return;
	}

	for (let output of outputs.values()) {
		console.log(output);
		for (let note of notes) {
			output.send(noteOn(note, 100));
			output.send(noteOff(note), window.performance.now() + 500);
		}
	}
}

なおページをリロードしたりする際に接続されている全MIDIチャンネルに all note off とかが送られるみたい。

  1. トップ
  2. tech
  3. ウェブページ(JavaScript)からDAWへのノート入力
▲ この日のエントリ