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

播放具有相应的动画图像序列的音频，带有播放和播放功能。暂停

1 个答案: