搜索欄上的HTML5音頻標籤用JavaScript處理

我有我的代碼如下搜索欄上的HTML5音頻標籤用JavaScript處理

<header> 
    <audio src="friends_and_family_03.mp3" id="audio" controls></audio> 
    <input type="range" step="any" id="seekbar"></input> 
    <script> 
     seekbar.value = 0; 
     var audio = document.getElementById("audio"); 

     var seekbar = document.getElementById('seekbar'); 
     function setupSeekbar() { 
      seekbar.min = audio.startTime; 
      seekbar.max = audio.startTime + audio.duration; 
     } 
     audio.ondurationchange = setupSeekbar; 

     function seekAudio() { 
      audio.currentTime = seekbar.value; 
     } 

     function updateUI() { 
      var lastBuffered = audio.buffered.end(audio.buffered.length-1); 
      seekbar.min = audio.startTime; 
      seekbar.max = lastBuffered; 
      seekbar.value = audio.currentTime; 
     } 
     seekbar.onchange = seekAudio; 
     audio.ontimeupdate = updateUI; 

    </script> 
    <p> 
     <button type="button" onclick="audio.play();">Play</button> 
     <button type="button" onclick="audio.pause();">Pause</button> 
     <button type="button" onclick="audio.currentTime = 0;"><< Rewind</button> 
    </p> 

</header>

這http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

所進行的說明我的問題是 1）搜索條最高值未設置根據到音頻持續時間。（搜索欄寬度只是音頻持續時間的一半左右）。 2）當音頻播放時，seekbar沒有顯示任何進度，但是如果拖動seekbar，currenTime實際上會改變。

任何人都可以幫助我修改我的代碼，以便它的功能正常嗎？

來源

2010-08-23 ptamzz

如果您遇到同樣的問題，這裏是解決方案。（我從另一個論壇得到它）。只需添加這兩條線：

audio.addEventListener('durationchange', setupSeekbar); 
audio.addEventListener('timeupdate', updateUI);

或者我可能只是有點太愚蠢！大聲笑

來源

2010-08-24 06:17:06 ptamzz

搜索欄上的HTML5音頻標籤用JavaScript處理

回答

相關問題