私が歌川です

@utgwkk が書いている

Web MIDI API使って遊ぼうとしている

github.com

最近光る板を買ったこともあり、MIDIを喋るデバイスが日常にやって来たところで、ふとWeb MIDI APIの存在を思い出して作りはじめた。 create-react-app で作ってできるだけ環境構築で詰まらないようにして開発に速を出す作戦。 3時間かけて、セレクトボックスでDJコントローラーを選んで、あなたが選んだのはこれですって出せるようになった。

TypeScriptで静的型を付ける作戦に出ようとして、 navigator.requestMIDIAccess って書いたらそんなものはないって言われて絶望しかけてたけど、@types/webmidi っていう最高の型定義ファイルがあって救われた。

WSLで開発してると、 npm install は途中でめちゃくちゃ詰まるけど yarn は高速に終わる、という出来事があって愉快だった。速攻でpackage-lock.jsonを消した。

最初glitch.comで開発しようとして、React使ってみたいからっていう理由でやめたけど、glitch.comにもReactの開発環境のテンプレートありそうに見える。

glitch.com

素のJSで書きかけたやつは↓に置いてある。手持ちのMIDIバイスを接続してページを開いて、セレクトボックスに選択肢が増えてたら成功。MIDIバイスが手元にない方は、残念でした。

Hello!

追記

ReactとTypeScriptでやろうとしたけど、やりたいことをやりつつ綺麗な設計にしようと考えるとぜんぜん手が進まないので、glitch.com上でどんどん書いていくことにした。動けばよかろうの精神。

お手持ちのMIDIバイスからの入力データを受けて流せるようになった。