Benutzerdefinierte Fortschrittsbalken für <audio> und <progress> HTML5 Elemente

Question

Ich bin geistesgestört bei der Ausarbeitung, wie Sie eine benutzerdefinierte Suchleiste für einen Audio-Player mit dem Tag und einfachen Javascript erstellen.

Aktuelle Code:

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

Wäre es möglich, den Fortschrittsbalken zu verbinden, so dass, wenn ich ein Lied spielen die Fortschritte gezeigt wird?

Answer 1

Ja, es ist möglich, das Ereignis timeupdate des Audio-Tags zu verwenden. Sie erhalten dieses Ereignis jedes Mal, wenn die Position der Wiedergabe aktualisiert wird. Dann können Sie Ihren Fortschrittsbalken mithilfe der Eigenschaften currentTime und duration des Audioelements aktualisieren.

Sie können ein funktionierendes Beispiel in diesem fiddle

Answer 2

Erstens, verwenden Sie nicht die progress Element, es ist ein Scheiß Element (für jetzt) ​​und Styling ist es ein großer Schmerz in ... nun, es ist langweilig (Schau dir ein kleines Projekt, das ich gemacht, look at it (und es ist juste webkit/moz)).

Wie auch immer, Sie sollten das Dokument auf MDN lesen, es ist sehr einfach und mit vielen Beispielen. Was Sie suchen ist die currentTime Attribut, hier ein kleiner Ausschnitt:

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

Also, was Sie brauchen, ist die Quer Multiplikation zu verwenden (div ist das Element, das Sie als Fortschrittsbalken verwenden): Wo ich klickte auf div | DIE ZEIT, DIE ICH WISSEN MÖCHTE
----------------------------------------
Gesamtlänge von div | Die Gesamtzeit meines Videos/Audios (audio.seekable.end())

Answer 3

sehen Wenn Sie glatte Fortschrittsbalken, versuchen some wie die

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

ziemlich rau, aber arbeitet