Suchleiste mit Javascript Audio-HTML5-Tag Umgang

Question

Ich habe meine Codes wie unten

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

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

Meine Probleme erklärt sind 1) Der seekbar max-Wert nicht gesetzt ist gemäß zur Audiodauer. (Die Suchleistenbreite beträgt nur etwa die Hälfte der Audiodauer). 2) Die Suchleiste zeigt keinen Fortschritt, während die Audiodaten abgespielt werden, aber wenn Sie die Suchleiste ziehen, ändert sich die aktuelle Zeit tatsächlich.

Kann jemand mir helfen, meinen Code zu ändern, damit er richtig funktioniert?

Answer 1

Wenn Sie das gleiche Problem haben, hier ist die Lösung. (Ich habe es von einem anderen Forum). Fügen Sie einfach diese beiden Zeilen:

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

Oder vielleicht war ich nur ein wenig zu dumm !! lol