ちゅうことで、Jingle Y.M.O.をBGMにアニメーションする部分を作ってみた。
スクリーンショット
バイナリ
https://github.com/sfpgmr/gigacapsule/releases/tag/v0.0.2
タイミングを合わせてd3.jsでSVGアニメーションをしている。内容は稚拙なものである。見た目ずれない程度に動画とオーディオのタイミングを合わせている。これはrequestAnimationFrame()でオーディオ・クロックを読み出すことによって実現している。
d3.jsはjqueryの代わりとして使っているだけで、データ・ドリブンな機能はまったく使っていない。DOM操作ライブラリとしてjqueryのようなファットさはないが、必要十分な機能が備わっているので気に入っている。