web-dev-qa-db-fra.com

Barre de progression personnalisée pour les éléments <audio> et <progression> HTML5

Je suis stupéfait de savoir comment créer une barre de recherche personnalisée pour un lecteur audio à l'aide du tag et du langage Javascript simple.

Code actuel:

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

Serait-il possible de lier la barre de progression pour que la progression apparaisse lorsque je joue une chanson?

javascriptaudioprogress
13
Zach Boyd McTague

Oui, il est possible d’utiliser l’événement timeupdate de la balise audio. Vous recevez cet événement chaque fois que la position de la lecture est mise à jour. Ensuite, vous pouvez mettre à jour votre barre de progression à l'aide des propriétés currentTime et duration de l'élément audio.

Vous pouvez voir un exemple de travail dans ce violon

23
jbalsas

Si vous voulez une barre de progression lisse, essayez quelque chose comme ça

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

Assez rugueux, mais fonctionne

6
Vladislav Filonov

Tout d’abord, n’utilisez pas l’élément progress, c’est un élément de merde (pour le moment) et le styler est très pénible ... eh bien, c’est ennuyeux (regardez un petit projet que j’ai fait, regardez-le (et c'est juste webkit/moz)).

Quoi qu'il en soit, vous devriez lire la doc sur MDN , c'est très facile et avec beaucoup d'exemples. Ce que vous recherchez, c'est l'attribut currentTime, voici un petit extrait:

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

Vous devez donc utiliser la multiplication croisée (div est l'élément que vous utilisez comme barre de progression): Où j'ai cliqué sur div | LE TEMPS JE VEUX SAVOIR
—————————————————————————————————————————
Longueur totale de div | Le temps total de ma vidéo/audio (audio.seekable.end())

1
Calvein