音の鳴るブログ

鳴らないこともある

Web Music ハッカソン で Tシャツ をもらいました

Web Music ハッカソン で WebSocket で演奏情報を分散配信して複数のブラウザでひとつの音楽を演奏するシーケンサを作って、頑張った賞みたいなので LittleBits のTシャツをもらいました。

コンセプト的なやつ

f:id:mohayonao:20150726201422p:plain

  • サーバーがある
  • サーバーは音楽の演奏情報を持っている
  • MIDIコントローラー等でサーバーの演奏情報を操作できる
  • たくさんのクライアントがある (10-50台くらいを想定), WebSocket で接続
  • それぞれのクライアントにバラバラに演奏情報 (JSON) を送信する
  • 空間全体でひとつの音楽になる

経緯

去年からちょくちょくウェブオーディオを使ったインスタレーションとかライブを手伝っているのですが、そこで得られたノウハウが全然形として残っていなかったので整理したかったのと、あと今後のために試しておきたかったこととか React とか flux とかの最新のトレンドとかを全部ぶっこんでみたかった。

当日のハック

諸事情あってかなりの張り切りモードになっていたせいで事前に準備しすぎて、あとは細かい調整するくらいしかできない状態だったのだけど、当日一緒になった方々に機能を追加してもらえたりハッカソンぽい感じで作業できた。僕は最強JSビルド環境厨みたいなところがあって、何も考えずに Node.js で ES6 で React で Flux (しかも自分で実装したやつ) で npm run scripts を使っていてかなり制限のきつい状況だったのだけど、うまい具合に対応してもらえてよかった。

スマートフォンの向きでシンセリードのフィルターのかかり具合を制御できる機能を追加してくれた

1x1 の Canvas がチカチカするだけだった画面に 波形 と スペクトラム を表示してくれた

ありがとうございました!

デモ

会場のWiFiが想定外に悪くて全然できなかった。どこか10台以上のクライアントを使ってデモさせてくれるところないですかね?

一台のPCで9つのブラウザウインドウを開いて実行している画面。違う音が出ているので画面の表示はバラバラ、同時に聞くとひとつの音楽になる。本来はこれをハッカソン参加者のそれぞれのPCで実行するつもりだった。

f:id:mohayonao:20150727102503p:plain

一応サーバーがなくても動くスタンドアロン版も用意しているので、雰囲気をつかむだけなら試せる。こっちはめっちゃ React ってる。演奏情報のメッセージングをサーバーを介するかクライアント単体で完結させるかだけなのでベースのコードはほとんど共有できている。

http://mohayonao.github.io/web-music-hackathon-04/

f:id:mohayonao:20150727103701p:plain

懇親会

  • @sascacci さんと楽器の手触り感の気持ちよさの話
  • @aike1000 さんと開発環境とかテストの話
  • @g200kg さんのGPUを使った信号処理の話

あと、今度 YAMAHA から発売される reface はスピーカーがついてて良いみたいなこととか DX7II の思い出みたいなことを話していた気がする。