사용자 정의 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> 

자바 스크립트 :

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

이러한 줄을 제거하십시오.

및 SeekBar를 값 자바 스크립트 onchange를 triger됩니다 설정하는 경우

... 당신은 제거해야합니다 seekbar.onchange = seekAudio;

는 사용자가 언제든지 클릭 할 때 SeekBar를 추구하지 않는가요? 또는 시간을 업데이트하는 데 문제가 있습니다. (시간은 업데이트되지만 검색 바는하지 않습니다)? 코드

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

를 제거 성능 향상을 위해 :

또한 문제 하나를 ... (SeekBar를 업데이트 문제)

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

EDIT (논외)를 발생할 수 있습니다, 이러한 코드가 필요하지 않습니다 이걸 updateUI에 덧붙이겠습니다

div.textContent = formatTime(audio.currentTime);