La balise HTML `audio`

Découvrez les bases du travail avec le HTMLaudioétiqueter

LeaudioLa balise vous permet d'incorporer du contenu audio dans vos pages HTML.

Cet élément peut diffuser de l'audio, peut-être en utilisant un microphone viagetUserMedia(), ou il peut lire une source audio que vous référencez en utilisant lesrcattribut:

<audio src="file.mp3" />

Par défaut, le navigateur n'affiche aucun contrôle pour cet élément. Ce qui signifie que l'audio ne sera lu que s'il est réglé sur la lecture automatique (plus à ce sujet plus tard) et que l'utilisateur ne peut pas voir comment l'arrêter, contrôler le volume ou se déplacer dans la piste.

Pour afficher les commandes intégrées, vous pouvez ajouter lecontrolsattribut:

<audio src="file.mp3" controls />

Les contrôles peuvent avoir un habillage personnalisé.

Vous pouvez spécifier le type MIME du fichier audio à l'aide dutypeattribut. S'il n'est pas défini, le navigateur essaiera de le déterminer automatiquement:

<audio src="file.mp3" controls type="audio/mpeg" />

Un fichier audio par défaut n'est pas lu automatiquement. Ajouter leautoplayattribut pour lire l'audio automatiquement:

<audio src="file.mp3" controls autoplay />

Remarque: les navigateurs mobiles n'autorisent pas la lecture automatique

LeloopL'attribut redémarre la lecture audio à 0:00 s'il est défini, sinon s'il n'est pas présent, l'audio s'arrête à la fin du fichier:

<audio src="file.mp3" controls autoplay loop />

Vous pouvez également lire un fichier audio désactivé à l'aide demutedattribut (pas vraiment sûr de l'utilité de ceci):

<audio src="file.mp3" controls autoplay loop muted />

CORS

L'audio est soumis àCORSet à moins que vous ne l'autorisiez côté serveur, un fichier audio ne peut pas être lu cross-origin.

Précharger l'audio

Si vous ne définissez pasautoplay, la spécification dit que les navigateurs ne téléchargeront que les métadonnées audio (pour connaître la longueur, par exemple) mais ne téléchargeront pas l'audio lui-même.

Vous pouvez forcer le préchargement de l'audio en utilisant

<audio src="song.mp3" preload="auto" />

Affichage du contenu siaudion'est pas pris en charge

Leaudiola balise esttrès bien soutenu, jusqu'à IE9, donc de nos jours, il ne devrait pas être nécessaire d'avoir un texte d'espace réservé, mais nous avons cette option. Vous ajoutez simplement une balise de fermeture et insérez du texte entre les balises d'ouverture et de fermeture:

<audio src="song.mp3">Audio tag not supported</audio>

Ajout de contrôles natifs

Au lieu de lire automatiquement l'audio en arrière-plan, vous pouvez choisir de demander au navigateur d'afficher un ensemble de commandes pour permettre à l'utilisateur de lire l'audio quand il le souhaite, d'avoir une indication de la longueur, de régler le volume et de les laisser naviguer sur la piste:

<audio src="song.mp3" controls />

Voici à quoi cela ressemble dans Chrome:

Audio element

Vous pouvez styliser les contrôles à l'aide de CSS, bien que cela n'entre pas dans le cadre de cette introduction.

Ajout de plusieurs sources

Les navigateurs peuvent implémenter un codec audio mais pas un autre. Vous souhaitez peut-être utiliser une nouvelle norme qui réduit de moitié la taille du fichier, mais vous souhaitez toujours prendre en charge les navigateurs plus anciens.

Vous le faites avec lesourceétiqueter:

<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

Travailler avec des événements audio

Nous pouvons écouter les événements sur chaqueaudioélément en utilisant JavaScript, pour créer des projets et des interfaces intéressants. Il y a beaucoup d'événements différents avec lesquels jouer.

Leplayl'événement est déclenché lorsque la lecture audio démarre:

document.querySelector('video').addEventListener('play', () => {
  alert('Audio is playing!!!')
})

Vous pouvez également ajouter directement cet événement (comme les autres) en utilisant leon<event>attribut directement sur l'élément HTML:

<audio src="song.mp3" controls onplay="playing()" />
const playing = () => {
  alert('Audio is playing!!!')
}

Voici quelques événements que vous pouvez écouter:

  • playla lecture audio a commencé
  • pausel'audio a été mis en pause
  • endedlecture audio terminée
  • timeupdatel'utilisateur a interagi avec la chronologie de lecture et est allé en avant / en arrière
  • volumechangel'utilisateur a changé le volume

Il y a beaucoup plus d'événements liés au chargement audio, etvous pouvez trouver la liste complète sur MDN.

Téléchargez mon gratuitManuel HTML


Plus de tutoriels html: