javascript - 播放带有播放和暂停动画的相应图像序列的音频

Question

我正在尝试使用 HTML5 和 javascript(可能是 ajax 或 jquery)创建带有背景音频的一系列图像的动画。我基本上是在尝试制作几个人之间的简单对话(由图像描绘)和通过(音频)语音的动画。

我有一个音频文件(mp3/ogg)和一系列图像。当我播放音频时，图像的顺序将相应地显示。

这里有一个问题，如果我暂停或重播音频，图像序列也必须停止或从头开始重播。

因此图像序列必须与音频播放同步。

有什么想法或概念吗？现在我有一个可以播放/暂停的jPlayer。也可以用jPlayer完成吗？

Answer 1

只需根据音频的currentTime 做出决定即可。 Example

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);