framerとMIDIを使ってブラウザで演奏する
Publish 2018.04.28
仕事でframerというソフトを使う機会があって、これが凄く楽しいソフトなんでちょっと遊んでみました。
Framer: A Free Interactive Design Tool for Teams
基本的にはスマホアプリやWebサイトのUIデザインツールで、いわゆるプロトタイピングツールってやつです。2週間フリーで使えますが、フリーソフトではないですし、ちょっと特殊なツールなので趣味で使うにはハードルが高いでしょう...
このソフトは画面内の挙動を細かく検討できるのが特徴で、画面遷移からアニメーションまで全てコードで制御できます。
CoffeeScriptという言語を使うんですが、arduino以外は大して触ってこなかった自分でも慣れるとサクサク作業できたので難易度は低いんじゃないかと思います。
このソフトのなにが良いって、MIDIに対応してるんです。MIDIコントローラーを使って画面内の要素を動かしたり色を変えたりできます。
まだ実装段階ではないアプリやWebサイトの使い心地を検証したいときに、誰かがMIDIコントローラーを使って裏で操作しつつ、被験者にアプリやWebサイトを触ってもらうなんてことをサラッとできちゃうわけです。
さらに、このソフトは各種メディアファイルに対応してます。ボタンをクリックしたときに動画や音声を再生させるなんてことも出来ます。
さらにさらに、このソフトで作ったプロトタイプは操作性を完全に残したままWebで共有できます。
例えば、MIDI信号をトリガーにして音声ファイルを再生するプロトタイプを作ってWebで共有したら、ブラウザでも動作します。
説明が長くなっちゃいましたが本題に入ります。
要約すると、ブラウザで動く簡易ドラム音源を作ることができます。
というわけで作ってみました。
macとwindowsのchromeで動作しました。
反応しない場合はchormeを一旦終了して、MIDIコントローラーを繋いだ状態でchromeを起動してみてください。
ファイルの読み込みが原因なのか、たまに遅延が出ます。コードの良し悪しでどうこうなるのか分かりませんが調整していきます。
細かい挙動はさておき、やってることはMIDI信号をトリガーにして音出してるだけです。いずれ自分のサイトとして公開したいんですが、webの知識が全く無いのでどっから手をつけて良いのやらって感じです。
framerをインストールしないと見れませんが、中身のファイルもコードも含めて全てダウンロードできるので興味のある方はどうぞ。
音源にはHydrogen用に公開されている音声ファイルを使ってます。
