読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

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

electron 音楽・動画 JavaScript HTML5 YMO

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

スクリーンショット

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

バイナリ

Release Jingle Y.M.O.を再生する部分を追加 · sfpgmr/gigacapsule · GitHub

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

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

Giga Capsule?20th ANNIVERSARY King of Techno? [DVD]

Giga Capsule?20th ANNIVERSARY King of Techno? [DVD]