barre de recherche manipulation avec le javascript sur l'étiquette audio HTML5

Question

J'ai mes codes comme ci-dessous

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

C'est comme expliqué dans http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

Mes problèmes sont 1) La seekbar valeur max est pas réglée en fonction à la durée de l'audio. (La largeur de seekbar est juste environ la moitié de la durée audio). 2) La barre de recherche ne montre aucun progrès lorsque l'audio est lu, mais si vous faites glisser la barre de recherche, le currenTime change réellement.

Quelqu'un peut-il m'aider à modifier mon code pour qu'il fonctionne correctement ??

Answer 1

Si vous êtes confronté au même problème, voici la solution. (Je l'ai eu d'un autre forum). Il suffit d'ajouter ces deux lignes:

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

Ou peut-être j'étais juste un peu trop stupide !! lol