YMO Giga CapsuleのビューワをElectronで作ってみている(6)

公開:2015-10-11 15:14
更新:2017-11-15 21:58
カテゴリ:electron,音楽・動画,javascript,html5,ymo,gigacapsule viewerを作る,d3.js

ちゅうことで、Jingle Y.M.O.をBGMにアニメーションする部分を作ってみた。

スクリーンショット

バイナリ

https://github.com/sfpgmr/gigacapsule/releases/tag/v0.0.2

タイミングを合わせてd3.jsでSVGアニメーションをしている。内容は稚拙なものである。見た目ずれない程度に動画とオーディオのタイミングを合わせている。これはrequestAnimationFrame()でオーディオ・クロックを読み出すことによって実現している。

d3.jsはjqueryの代わりとして使っているだけで、データ・ドリブンな機能はまったく使っていない。DOM操作ライブラリとしてjqueryのようなファットさはないが、必要十分な機能が備わっているので気に入っている。