web-dev-qa-db-fra.com

Comment vérifiez-vous si un élément audio HTML5 est chargé?

Je veux savoir comment vérifier si un élément audio HTML5 est chargé.

javascripthtml5-audio
34
auragar

Pour savoir quand l'audio est prêt à démarrer, ajoutez des écouteurs pour les événements oncanplay ou oncanplaythrough . Pour savoir quand l'audio est chargé, écoutez l'événement onloadeddata :

<audio oncanplay="myOnCanPlayFunction()"
       oncanplaythrough="myOnCanPlayThroughFunction()"
       onloadeddata="myOnLoadedData()"
       src="myaudio.ogg"
       controls>
    <a href="myaudio.ogg">Download</a>
</audio>

<script>
function myOnCanPlayFunction() { console.log('Can play'); }
function myOnCanPlayThroughFunction() { console.log('Can play through'); }
function myOnLoadedData() { console.log('Loaded data'); }
</script>
47
robertc

Consultez la réponse de robertc pour savoir comment utiliser les écouteurs d'événements. Vous pouvez également vérifier directement l'état prêt d'un élément audio:

var myAudio = $('audio')[0];

var readyState = myAudio.readyState;

readyState sera un nombre. De documents de Mozilla :

  • 0 - Aucune information n'est disponible sur la ressource multimédia.
  • 1 - Une quantité suffisante de la ressource multimédia a été récupérée pour que les attributs de métadonnées soient initialisés. La recherche ne lèvera plus d'exception.
  • 2 - Les données sont disponibles pour la position de lecture actuelle, mais pas suffisantes pour lire réellement plus d'une image.
  • 3 - Des données pour la position de lecture actuelle ainsi que pour au moins un peu de temps dans le futur sont disponibles (en d'autres termes, au moins deux images de vidéo, par exemple).
  • 4 - Assez de données sont disponibles - et le taux de téléchargement est suffisamment élevé - pour que le média puisse être lu jusqu'à la fin sans interruption.
23
lk145