1

HTML5 と javascript を使用して、おそらく ajax または jquery を使用して、バックグラウンド オーディオを含む一連の画像のアニメーションを作成しようとしています。私は基本的に、複数の人々の間の簡単な会話 (画像で表現) と音声 (オーディオ) によるスピーチのアニメーションを作成しようとしています。

音声ファイル (mp3/ogg) と一連の画像があります。オーディオを再生すると、それに応じて一連の画像が表示されます。

ここにキャッチがあります。オーディオを一時停止または再生すると、画像のシーケンスも停止または最初から再生する必要があります。

したがって、画像のシーケンスはオーディオの再生と同期している必要があります。

アイデアやコンセプトはありますか？現在、再生/一時停止を備えた作業中のjPlayerがあります。jPlayerでもできますか？

4

1 に答える 1

1

currentTimeオーディオに基づいて決定を下すだけです。例

var audio = document.querySelector('audio'),
    img = document.querySelector('img'),
    imgs = ['http://raptorsrepublic.com/wp-content/uploads/2012/08/meh_cat.jpg', 'http://2.bp.blogspot.com/_8tZf9lm-smo/R7hn7pNx-jI/AAAAAAAAALI/86DN7VedT_Q/s400/meh.jpg', 'http://2.bp.blogspot.com/-yWsoWNVX4jU/UAy5uJxD52I/AAAAAAAANSc/OTje6k_C5Q8/s1600/meh2.jpg'],
    duration, interval, currentImg;

(function callee(ready) {

    if (ready !== false) ready = true;

    if (!ready) {
        return audio.addEventListener('canplaythrough', callee);
    }

    if (!audio.playing) audio.play();

    if (!duration) {
        duration = audio.duration;
        interval = duration / imgs.length;
    }

    if (isNaN(duration)) return setTimeout(callee, 1000); 

    var currentTime = audio.currentTime;

    if (!currentImg) {
        img.src = currentImg = imgs[0];
    }

    var currentTimeImage = imgs[Math.floor(currentTime / interval)];

    if (currentTimeImage != currentImg) {
        img.src = currentImg = currentTimeImage;
    }

    setTimeout(callee, 1000);

})(false);
于 2012-10-03T10:39:55.810 に答える