自定義的JavaScript/HTML5播放器問題

Question

我一直在使用這個自定義音頻播放器，我把幾個教程放在一起，並圍繞互聯網解決，並在過去2個月中一直使用它。

它在Chrome中100％工作，但更新後，搜索欄發生停止工作。

這是我的問題嗎？還是對其他人有用？

HTML：

<div id="musicplayer"> 
     <table> 
      <tr> 
       <audio id="audio" src="../audio/oby/weightless/Got To Be Free.mp3"></audio> 
       <td> 
        <button id="play" type="button" onclick="playPause()" ></button> 
       </td> 
       <td> 
        <div id="boxed" > 
          <a href="#" id="songName">Select a song from the playlist</a> 
          <p class="right" id="timeInfo">00:00</p> 
          <input type="range" step="any" id="seekbar"></input> 
        </div> 
       </td>  
      </tr> 
     </table> 
</div> 

的JavaScript：

<script>  
    var audio = document.getElementsByTagName('audio')[0], 
    div = document.getElementById('timeInfo'); 

    function formatTime(s, m) { 
    s = Math.floor(s);  
    m = Math.floor(s/60); 
    m = m >= 10 ? m : '0' + m;  
    s = Math.floor(s % 60); 
    s = s >= 10 ? s : '0' + s;  
    return m + ':' + s; 
    } 

    setInterval(function() 
    { 
    div.textContent = formatTime(audio.currentTime); 
    }, 100); 

    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; 
    audio.addEventListener('durationchange', setupSeekbar); 
    audio.addEventListener('timeupdate', updateUI); 
</script> 

Answer 1

重複代碼：

audio.ondurationchange = setupSeekbar; 

和

audio.addEventListener('durationchange', setupSeekbar); 

嘗試刪除這些行中的任何一行。

，如果設置搜索條值在JavaScript將平變化通過靶向......你將不得不刪除seekbar.onchange = seekAudio;

是當用戶點擊任何時候你的搜索條不求？或者更新時間有問題。 （時間正在更新，但seekbar沒有）？

你並不需要這些代碼，也可能會導致問題的一個...（搜索條的更新問題）

var lastBuffered = audio.buffered.end(audio.buffered.length-1); 
seekbar.min = audio.startTime; 
seekbar.max = lastBuffered; 

EDIT（offtopic）：爲了更好的性能刪除代碼

setInterval(function() 
{ 
div.textContent = formatTime(audio.currentTime); 
}, 100); 

並附加此更新UI

div.textContent = formatTime(audio.currentTime);