javascript - 通过播放和暂停播放具有相应图像序列的音频

Question

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

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

这是关键，如果我暂停或重播音频，图像序列也必须从头停止或重播。

所以图像序列必须与音频播放同步。

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

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