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?