2010-08-23 12 views
7

tengo mis códigos de la siguiente manerabuscar manejo con javascript en etiquetas de audio HTML5 barra de

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

Esto es como se explica en http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

Mis problemas son 1) El valor máximo seekbar no se establece de acuerdo a la duración del audio (El ancho de la barra de búsqueda es aproximadamente la mitad de la duración del audio). 2) La barra de búsqueda no muestra ningún progreso a medida que se reproduce el audio, pero si arrastra la barra de búsqueda, el currenTime realmente cambia.

¿Alguien me puede ayudar a modificar mi código para que funcione correctamente?

Respuesta

6

Si se encuentra con el mismo problema, aquí está la solución. (Lo obtuve de otro foro). Simplemente agregue estas dos líneas:

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

¡¡O tal vez fui un poco estúpido !! lol

Cuestiones relacionadas