ブラウザからMIDI機器を操作し、光る板を光らせよう
自己紹介
https://gyazo.com/b7086c4e065efda64f7d06311fa418af
KMC 5回生
京都大学大学院情報学研究科通信情報システム専攻 M1
普段は🍺や🍶を飲んで暮らしています
近況
ミーナ京都のユニクロでTシャツ作りました
https://gyazo.com/9b531b114a01d616685d5e5ca775a81d
アンケート
DTMをやっている？
昔なつかしMIDIで音が流れるwebサイトを見たことがある？
MIDI機器を触ったことがある？
JavaScriptを書いたことがある？
光る板を持っている？
光る板
Numark Party Mix
LEDミラーボール付きのDJコントローラー
https://youtu.be/Z83ivHy62xA
MIDI
MIDI（ミディ、Musical Instrument Digital Interface）は、電子楽器の演奏データを機器間で転送・共有するための共通規格である。物理的な送受信回路・インタフェース、通信プロトコル、ファイルフォーマットなど複数の規定からなる。日本のMIDI規格協議会（JMSC、現在の社団法人音楽電子事業協会）と国際団体のMIDI Manufacturers Association (MMA) により策定され1981年に公開された。MIDI 1.0の策定完了から38年後の2019年に、Ver.2.0となるMIDI 2.0の策定開始が発表された。
昔なつかしインターネットで勝手に曲を流すやつ
MIDIキーボードとか
Web MIDI API
ブラウザからMIDIデバイスとやり取りするAPI
Web MIDI APIでできること
お手元のMIDI機器の操作全般
ブラウザで動くDJソフトウェア
キラキラ光る板を光らせる
なぜWeb MIDI API
おもしろくないですか？
よくわからないけどMIDI機器が使うデータを見て推測できて楽しい
JavaScriptは書けるからなんとかなるの精神
Web MIDI APIを使ってみよう
MIDIデバイスへの接続リクエストを投げる
code:01.js
navigator.requestMIDIAccess().then(access => {
// accessを使っていろいろやる
});
MIDIデバイスの情報を得る
access.inputs に入力デバイス
access.outputs に出力デバイス
id(何？)をとってデバイスを返すMap
とりあえずデバイス情報見ようぜ
お手持ちのMIDIデバイスを接続してからページを開いてください
access.inputs.forEach で入力デバイズに対してループを回して値を取り出せる
code:02.js
access.inputs.forEach(v => {
console.log(${v.manufacturer} ${v.name});
console.log(v);
});
入力デバイスからの入力を見る
みんな大好きEvent Handler (onmidimessage)
code:03.js
access.inputs.forEach(input => {
input.onmidimessage = e => {
const target = e.target;
const data = e.data;
console.log(${target.manufacturer} ${target.name} (${target.id}) sent ${data});
};
});
出力デバイスになにか送れるようにする
符号なし8ビット整数の配列を送る
code:04.js
const sendAll = (...data) => {
access.outputs.forEach(output => {
output.send(data);
});
};
お待たせしました
Numark Party Mixを光らせます
3.htmlで sendAll(176, 32, 3) すればOK
おもてなし感あるボタンを置く
code:05.html
<button onclick="sendAll(176, 32, 3)">Party</button>
光る板をもっと光らせたい
この機能はこのキーでやりますみたいな対応表 (XML)
このキーを光らせるときはこれをsendしますみたいな表 (JS)
☝️今日はこっちを見ます
とりあえず表
PADボタン
Xは0x14〜0x17
0x84を0x85にしたら反対側のPADボタンの光を操作できる
sendAll(0x84, X, 0x7f) で点灯
sendAll(0x84, X, 0x01) でうっすら光った状態
sendAll(0x84, X, 0x00) で消灯
再生ボタンなど
Xは0x00〜0x02
0x80→0x81で反対側
sendAll(0x80, X, 0x7f) で消灯
sendAll(0x80, X, 0x01) でうっすら点灯
sendAll(0x80, X, 0x00) で消灯
ページ開いたらランダムに点灯させるようにした
さっき見た表と照らし合わせてsendAllしまくる
code:06.js
// light pad buttons
const index = Math.floor(Math.random() * states.length);
sendAll(side, button, statesindex); }
}
// light play button
const index = Math.floor(Math.random() * states.length);
sendAll(side, button, statesindex); }
}
愉快にボタンを光らせよう
さっきの実装を randomLight 関数にでもまとめよう
window.setInterval(randomLight, 500) ってやると120BPMでできる
勝手にボタンが光って使い物にならないDJデッキができた
Web MIDI API現状
ChromeとOperaでしか使えない
勝手にMIDI機器にアクセスできていいのかみたいな話題
secureでない(HTTPの)サイトでは使えない
将来的には、いかなる場合もWeb MIDI APIを使う権限リクエストをユーザーに飛ばして、許可された場合にしか使えなくなる
現状はSystem Exclusive Messageを投げるとき権限リクエストが必要
勝手にスピーカーから音を鳴らされる時代から、勝手にMIDI機器に信号を送信される時代にシフトチェンジ
今日のまとめ
ブラウザからMIDI機器を操作するAPIについて紹介しました
APIの使用例として、光る板をブラウザから愉快に光らせてみました
参考