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

公開:2015-10-07 20:48
更新:2020-02-15 04:37
カテゴリ:electron,音楽・動画,javascript,html5,ymo,gigacapsule viewerを作る,d3.js

とりあえず動画やオーディオを再生できるようになった。そしてビルドも意外に簡単にできることを知った。Electronなかなか良いな。

続いてJingle YMOをBGMに、d3.jsでアニメーションを作ろうかなと思っている。これはGiga CapsuleのDVDにも入っているものであるが、Directorで作られたバイナリであるので、残念ながら再生することはできない。そこでオリジナルで作ってみようと思ったのだ。

Jingle YMOとはこの曲のことである。

アイデアとしては歌詞がアニメーションするようなものを作ってみようと思っている。d3.jsをいじり始めたが、DOM操作方法は覚えていたものの、SVGやtransitionのことはすっかり忘れてしまっている。d3.jsのドキュメントはよくできているので、理解しなおすのは簡単だとは思うが。

今回はWeb Audioを使って再生しようと思う。requestAnimationFrameとオーディオクロックをうまく活用してアニメーションと同期できたらいいなと思っている。しかしWeb Audioはまだドラフトレベルなのだな。早く勧告まで進んでもらいたいものだ。

Web Audioがなかなか進まないのは高機能なせいだろうな。MozillaのAudio Data APIのほうがシンプルだったから勧告レベルまで進むのも早かったかもしれない。インターフェースもいわゆるオーディオAPIのそれだったしね。

次のリリースではそのアニメーションを入れ込むことにしよう。