2010-08-23 2 views
7

가 나는따라 SeekBar를 최대 값이 설정되지 않음)

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

아래로 내 코드를했습니다 이것은 나의 문제가 1입니다 http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

에 설명되어 HTML5 오디오 태그에 자바 스크립트로 처리하는 바를 추구 오디오 지속 시간. (탐색 막대 폭은 오디오 지속 시간의 절반 정도입니다.) 2) 탐색 표시 줄에 오디오가 재생 될 때 진행률이 표시되지 않지만 탐색 표시 줄를 끌면 실제로 currenTime이 변경됩니다.

아무도 내 코드를 수정하여 올바르게 작동하도록 할 수 있습니까?

답변

6

같은 문제가 발생하는 경우 해결책을 제시합니다. (나는 다른 포럼에서 그것을 얻었다). 다음 두 줄을 추가하십시오.

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

아니면 그냥 너무 어리 석 었나요? 롤