Barra de progreso personalizada para <audio> y <progress> elementos HTML5

Question

Me da vueltas la cabeza al descubrir cómo crear una barra de búsqueda personalizada para un reproductor de audio con la etiqueta y un simple JavaScript.

Código actual:

<script> 
    function play() { 
    document.getElementById('player').play(); 
    } 

    function pause() { 
    document.getElementById('player').pause(); 
    } 
</script> 


<audio src="sample.mp3" id="player"></audio> 
<button onClick="javascript:play()" >Play</button> 
<button onClick="javascript:pause()" >Pause</button> 
<progress id="seekbar"></progress> 

¿Sería posible vincular la barra de progreso para que cuando juego una canción se muestra el progreso?

Answer 1

Sí, es posible usar el evento timeupdate de la etiqueta de audio. Recibe este evento cada vez que se actualiza la posición de la reproducción. Luego, puede actualizar su barra de progreso utilizando las propiedades currentTime y duration del elemento de audio.

se puede ver un ejemplo de trabajo en este fiddle

Answer 2

En primer lugar, no use el elemento progress, es un elemento de mierda (por ahora) y el diseño es un gran dolor en ... bueno, es aburrido (vea un pequeño proyecto que hice, look at it (y es juste webkit/moz)).

De todos modos, debería leer el documento en MDN, es muy fácil y con muchos ejemplos. Lo que se busca es el atributo currentTime, aquí un pequeño fragmento:

var audio = document.querySelector('#player') 
audio.currentTime = 60 // will go to the 60th second 

Así que lo que necesita es utilizar la regla de tres (div es el elemento se utiliza como una barra de progreso): Cuando hice clic en div | LA HORA QUE QUIERO SABER
----------------------------------------
Longitud total de div | El tiempo total de mi video/audio (audio.seekable.end())

Answer 3

Si quieres barra de progreso suave, trate somethink así

HTML:

<div class="hp_slide"> 
    <div class="hp_range"></div> 
</div> 

CSS:

.hp_slide{ 
    width:100%; 
    background:white; 
    height:25px; 
} 
.hp_range{ 
    width:0; 
    background:black; 
    height:25px; 
} 

JS:

var player = document.getElementById('player');  
player.addEventListener("timeupdate", function() { 
    var currentTime = player.currentTime; 
    var duration = player.duration; 
    $('.hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear'); 
}); 

bastante duro, pero funciona