Barra di avanzamento personalizzata per <audio> e <progress> Elementi HTML5

Question

Sono sbalordito a capire come creare una barra di ricerca personalizzata per un lettore audio utilizzando il tag e Javascript semplice.

Codice attuale:

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

sarebbe possibile collegare la barra di avanzamento in modo che quando io gioco una canzone viene mostrato il progresso?

Answer 1

Sì, è possibile utilizzare l'evento timeupdate del tag audio. Ricevi questo evento ogni volta che la posizione della riproduzione viene aggiornata. Quindi, è possibile aggiornare la barra di avanzamento utilizzando le proprietà currentTime e duration dell'elemento audio.

si può vedere un esempio di lavoro in questo fiddle

Answer 2

Prima di tutto, non utilizzare l'elemento progress, è un elemento di merda (per ora) e lo stile è un enorme dolore ... beh è noioso (guarda un piccolo progetto che ho fatto, look at it (e è juste webkit/moz)).

In ogni caso, dovresti leggere il documento su MDN, è molto semplice e con molti esempi. Quello che state cercando è l'attributo currentTime, ecco un piccolo frammento:

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

Quindi, ciò che è necessario è quello di utilizzare la moltiplicazione incrociata (div è l'elemento si utilizza come una barra di avanzamento): Dove ho cliccato su div | IL TEMPO CHE VOGLIO SAPERE
----------------------------------------
Lunghezza totale di div | Il tempo totale del mio video/audio (audio.seekable.end())

Answer 3

Se si vuole liscia barra di avanzamento, provare somethink come quella

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'); 
}); 

piuttosto grezzi, ma funziona