数日前からdancer.jsで遊んでいます。dancer.jsはjavascriptで音楽を再生しつつそのデータを取得して映像などに反映することができるライブラリです。詳しくは以下。
Link: dancer.js
コードの流れはだいたいわかったのですがどう使ったらいいか。。。Javascript(canvas)で絵を描くのもいいのですが、とりあえず思いつきでProcessing.jsと組み合わせてみました。
以下がとりあえず動いたアプリです。残念ながらIE, Firefoxは再生できません。Processing.jsがIEに対応していないようで（←恐らくこれは間違い）、Firefoxはmp3の再生に対応していないようで（ちょっと調べただけで本当のところはわかりませんが）。
動作確認したのはGoogle Chromeです。Safariも再生できますが、動作がおかしいです。。。これで公開していいのかわかりませんけどね。
Link: dancer_js_test
dancer.jsでは状態更新時にupdate関数が呼ばれます。このupdate関数に自作の関数をバインドすることで、音声データを用いた自作の処理（例えば音の波形を可視化するなど）を拡張できる仕組みになっているようです。サンプルではplayer.jsかplugins内のjsファイルにその記述があります。
で、このdancer_js_test内のplayer.jsにその記述を書いています。以下の部分です。getInstanceByIdの引数はProcessingのスケッチ名を入れる必要があります。ちなみにアンダースコアーは無視する必要があります。
var processingInstance;
//(2) put your sketch name here ----------------------*
processingInstance = Processing.getInstanceById('dancerjstest');
dancer.bind( 'update', processingInstance.draw);
ただ。。。Processingにも描画ループがあるはずで、dancer.jsからもコールされることを考えるとdraw()は相当な回数コールされていると思われます。いろいろ調整してみましたがわかりませんでした。
ちなみにdancer.jsでは他にも機能があるようです。ピークを越えたら処理する機能、FFTなどなど。それらも組み合わせてみたいのですが。。。もう少し安定させないとダメですね。
dancer_js_testのスケッチファイルをこちらにおきました。興味のある人は遊んでみてください。
ちなみにProcessing.jsのスケッチの構成ですが、自前の音楽ファイルを用意する場合はdataフォルダにいれるといいと思います。パス無しでplayer.jsで指定できます。あと、dancer.jsのJSファイルはProcessing.jsのテンプレート機能を使いましたのでtemplateフォルダに入れています。そしてindex.htmlを修正してこれらjsファイルを読み込むようにしています。ですのでライブラリファイルは修正していません。バージョンアップした場合はこれらファイルを置き換えればいいと思います。
