Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

wmh5-vote

https://wmh5-vote.firebaseapp.com/

これは何?

demo movie

コンセプト

  • 操作のいらないDJアプリ
  • 透明なUI
  • 疎結合なハック
  • メタハック
  • 半日程度で作れるもの

操作方法

観客

  • スマホのブラウザでアプリのページを開く
  • 雰囲気で画面の上か下(赤か青の領域)をタップする
  • 同じようにアプリのページを開いている(DJを含めた)全員の画面が同期して光る

👍 画面の構成要素がほとんどないのでスマホの画面を見ずに操作できる。

DJ

  • PCのブラウザでアプリのページを開く
  • Control+Command+Fなどでフルスクリーンにする
  • 観客が画面をタップしたのに合わせて画面が光る
  • それに合わせて雰囲気で演奏内容を変えたり無視したりする

👍 画面を開くだけなので操作の必要がなくプレイに集中できる。

DJ/sound

  • Novation LaunchControlを接続(接続すると横レイアウトになる親切設計)
  • 8トラックのドローン
  • パッドで各トラックをON/Off
  • 上ノブで音の雰囲気を調節
  • 下ノブで音量を調節

サウンドはSuperColliderで作成したものを色々やってJavaScriptで再生している。

音の定義はこういう感じ。

音の定義をシリアライズしたもの(drone.scsyndef)をJSONにコンバートしてfirebaseに保存、それぞれの端末でそれを解釈して音を再生している。

構成図

データフロー

  • 単方向データフロー
  • dispatcher は単なる EventEmitter
  • storedispatcher からデータを受けて
    • firebase経由で全体に通知 or そのままemitしてローカルに通知
  • view は役割ごとに3つに分割

使った技術/ライブラリ

はまったところ

  • 📱 iOSがWebWorkerをキャッシュして更新されない
    • WebWorkerのパスを "worker.js?" + Date.now() として対処
  • 🔥 firebase に同じ値をセットした時、更新の通知がされない
    • 画面のタップを 0 or 1 で書き込んで通知したかった..
    • value + Math.random() として対処
    • そもそもdatabaseでやることでない気がする
  • :rage4: しばらくすると音がめっちゃ壊れる
    • scsynth に問題あるっぽい
    • やばそうな時に強制リセットして対処

Fork

  • このリポジトリをfork/cloneする
  • npm install
  • firebaseでアプリを作成
  • .firebaserc を自分のアプリ名に変更
  • src/_config.jssrc/config.js にリネームしてAPIキーを設定
  • npm run deploy

License

MIT