memorandumsスマートフォン用の表示で見るmemorandums日々の作業ログです。javascript数日前からdancer.jsで遊んでいます。dancer.jsはjavascriptで音楽を再生しつつそのデータを取得して映像などに反映することができるライブラリです。dancer.jsコードの流れはだいたいわかったのですがどう使ったらいいか。Javascript(canvas)で絵を描くのもいいのですが、とりあえず思いつきでProcessing.jsと組み合わせてみました。以下がとりあえず動いたアプリです。Firefoxは再生できません。Processing.jsがIEに対応していないようで(←恐らくこれは間違い)、Firefoxはmp3の再生に対応していないようで(ちょっと調べただけで本当のところはわかりませんが)。Safariも再生できますが、動作がおかしいです。これで公開していいのかわかりませんけどね。dancer_js_testdancer.jsでは状態更新時にupdate関数が呼ばれます。このupdate関数に自作の関数をバインドすることで、音声データを用いた自作の処理(例えば音の波形を可視化するなど)を拡張できる仕組みになっているようです。サンプルではplayer.jsかplugins内のjsファイルにその記述があります。このdancer_js_test内のplayer.jsにその記述を書いています。getInstanceByIdの引数はProcessingのスケッチ名を入れる必要があります。ちなみにアンダースコアーは無視する必要があります。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ファイルを読み込むようにしています。ライブラリファイルは修正していません。バージョンアップした場合はこれらファイルを置き換えればいいと思います。»プロフィールid:ke_takahashiソフトウェア開発、工作、面白ガジェットに興味があります。(1)はてなブログをはじめよう!ke_takahashiさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。