播放音頻與相應的圖像被動畫播放和暫停

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