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

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

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

スクリーンショット

https://68.media.tumblr.com/7d36a6c37ab0daeb33d2a81c3daa0632/tumblr_nw1kpvFI2P1s44dwzo1_1280.png

バイナリ

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

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

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