GIFアニメーションについて

Question

15秒ほどのGIFアニメーションを作成しました。
webにてhtmlに貼り付けて公開しようと思っているのですが、
そのGIFアニメーションに音声を付けたいのです。

GIFアニメーションに音声は付けることはできないので、
MP3をJSで制御するなど、いい案があれば教えていただけますでしょうか。
よろしくお願いします。

追記
IE８以上対応

Answer 1

一番いいのは動画にしてしまうことですが、質問の趣旨に合わないので無理やりやるとすれば、

画像を読み込む
↓
音声を読み込む
↓
両方読み込まれたら同時に再生する

とやればいいと思います。
ただ、両方チェックするのは面倒なので容量が大きいと思われる
音声ファイルのほうが読み込まれた時には画像も読み込まれたものとします。

$("<img>").attr("src", "hoge.gif");
var audio = new Audio();
audio.src = "hoge.mp3";
audio.onload = function() {
  $("body").append("<img class='gif'>");
  $(".gif").attr("src", "hoge.gif");
  audio.play();
}

こんな感じですかね。
この方法はあくまでmp3の読み込みのほうが遅い前提ですので、問題がある場合は
画像の読み込みもチェックしてやってください。
あと、面倒だったのでjQueryを利用しています。

Comments

[Haruhisa]

ありがとうございます！
頂いた方法で試したいと思います。

Answer 2

分けてしまうとGIFアニメーションと音声の同期ができないと思います。
それでも大丈夫なのであればここの情報が使えると思います。

Comments

[Haruhisa]

やはり、分けてしまいますと同期できませんよね。。。
できれば、音声とアニメーションがずれない状態でできればなと思っています。

Answer 3

http://qiita.com/hyper_stereo/items/ffc2c4c39a533b73b935

Comments

[Haruhisa]

ありがとうございます！
すみません。書き忘れですがIE8対応したいです。