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

Je suis me suis mis à imaginer à travailler sur la façon de créer un personnalisé seekbar pour un lecteur audio à l'aide de la balise et 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 relier la barre de progression ainsi que lorsque je joue une chanson la progression est affichée?

HTML5 et des trucs comme onClick="javascript:play()" est une atroce de couplage.

OriginalL'auteur Zach Boyd McTague | 2012-09-07

  1. 22

    Oui, il est possible à l'aide de la timeupdate cas 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 de la currentTime et duration propriétés de l'élément audio.

    Vous pouvez voir un exemple dans ce violon

    Est-il possible d'avoir ce code régulières javascript plutôt que JQuery?
    bien sûr! ici il est! 😉
    Il vérifie toutes les 250ms pour la nouvelle heure. Est-il possible de faire cela un peu plus vite la barre se remplit doucement?
    Btw, c'est l'un des 1000s de raisons de ne pas le lien W3fools.com, que le lien est mort.
    J'ai mis à jour le lien pour pointer vers le mediaevents mdn page à la place.

    OriginalL'auteur jbalsas

  2. 6

    Si vous voulez lisse barre de progression,essayez somethink 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 rude,mais fonctionne

    OriginalL'auteur Vladislav Filonov

  3. 1

    Tout d'abord, n'utilisez pas le progress élément, c'est un élément de merde (pour l'instant) et le style qu'il est une énorme douleur dans... eh bien, c'est ennuyeux (regardez un petit projet que j'ai fait, regarder (et c'est juste webkit/moz)).

    De toute façon, vous devriez lire la doc sur MDN, il est très facile et avec beaucoup d'exemples. Ce que vous cherchez est la currentTime attribut, voici un petit extrait :

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

    Donc, ce que vous avez besoin est d'utiliser la croix-multiplication (div est l'élément que vous utilisez comme une barre de progression) :
    Là où j'ai cliqué sur div | LE TEMPS que je VEUX SAVOIR

    ----------------------------------------

    Longueur totale de div | Le temps total de ma vidéo/audio (audio.seekable.end())

    OriginalL'auteur Calvein