web-dev-qa-db-fra.com

HTML 5 <audio> - Lire le fichier à un certain moment

J'ai un simple extrait de lecture automatique qui lit le fichier audio, mais je me demandais soit en JavaScript, soit en tant qu'attribut, lire ce fichier à un certain moment (ex. 3:26).

<script type="text/javascript">
    var myAudio=document.getElementById('audio2')
    myAudio.oncanplaythrough=function(){this.play();}
</script>

<audio id="audio2" 
       preload="auto" 
       src="file.mp3" 
       oncanplaythrough="this.play();">
</audio>

Toute aide est la bienvenue. Merci d'avance :)

javascriptjqueryhtmlaudio
25
Stephen Cioffi

Quelques petites choses ... votre script devra d'abord être après la balise audio.

De plus, vous n'avez pas besoin de l'attribut oncanplaythough sur la balise audio car vous utilisez JavaScript pour gérer cela.

De plus, oncanplaythrough est un événement , pas une méthode. Ajoutons un écouteur pour cela, qui utilisera à la place canplaythough. Regarde ça:

<audio id="audio2" 
   preload="auto" 
   src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" >

   <p>Your browser does not support the audio element</p>
</audio>

<script>
  myAudio=document.getElementById('audio2');
  myAudio.addEventListener('canplaythrough', function() {
    this.currentTime = 12;
    this.play();
  });
</script>

Et enfin, pour démarrer la chanson à un moment précis, définissez simplement currentTime avant de lire réellement le fichier. Ici, je l'ai réglé à 12 secondes, il sera donc audible dans cet exemple, pour 3:26, vous utiliseriez 206 (secondes).

Découvrez la démo en direct: http://jsfiddle.net/mNPCP/4/

[~ # ~] modifier [~ # ~] : Il semble que currentTime peut être incorrectement implémenté dans les navigateurs autre que Firefox. Selon la résolution de ce bug W3C déposé , lorsque currentTime est défini, il devrait alors déclencher les événements canplay et canplaythrough. Cela signifie que dans notre exemple, Firefox jouerait la première seconde environ de la piste audio indéfiniment, sans jamais poursuivre la lecture. Je suis venu avec cette solution rapide, changeons

this.currentTime = 12;

pour tester pour voir si elle a déjà été définie, et donc empêcher le canplaythrough d'être appelé à plusieurs reprises:

if(this.currentTime < 12){this.currentTime = 12;}

Cette interprétation de la spécification est encore actuellement contestée, mais pour l'instant cette implémentation devrait fonctionner sur la plupart des navigateurs modernes avec prise en charge de l'audio HTML5.

Le jsFiddle mis à jour: http://jsfiddle.net/mNPCP/5/

20
MusikAnimal

La meilleure façon de procéder consiste à utiliser la spécification URI du fragment de média. En utilisant votre exemple, supposons que vous souhaitiez charger l'audio à partir de 3:26 in.

<audio id="audio2" 
       preload="auto" 
       src="file.mp3#t=00:03:26" 
       oncanplaythrough="this.play();">
</audio>

Alternativement, nous pourrions simplement utiliser le nombre de secondes, comme file.mp3#t=206.

Vous pouvez également définir une heure de fin en séparant le début des heures de fin par une virgule. file.mp3#t=206,300.5

Cette méthode est meilleure que la méthode JavaScript, car vous indiquez au navigateur que vous ne souhaitez charger qu'à partir d'un certain horodatage. Selon le format de fichier et la prise en charge du serveur pour les requêtes à distance, il est possible que le navigateur télécharge uniquement les données nécessaires à la lecture.

Voir également:

3
Brad