La balise HTML <audio>
La balise HTML <audio> intègre du son comme de la musique ou des flux audio. Découvrez ses attributs, ses formats et la politique d'autoplay avec W3Docs.
La balise <audio> est l'un des éléments HTML5 ajoutés pour permettre l'intégration de fichiers audio dans une page web. Elle permet de lire de la musique, des podcasts, des effets sonores et tout autre flux audio grâce au lecteur natif du navigateur, sans avoir besoin d'un plugin Flash ni d'un widget tiers.
Cette page explique comment intégrer de l'audio, quels formats de fichiers les navigateurs prennent en charge, les attributs qui contrôlent la lecture (controls, autoplay, loop, muted, preload), la politique d'autoplay qui surprend presque tout le monde, et comment rendre l'audio accessible.
La balise <source> ou l'attribut src pointe vers le fichier audio. Le chemin peut être une URL absolue ou relative. Pour la vidéo, la balise étroitement liée <video> fonctionne de la même manière.
Syntaxe
La balise <audio> vient par paires. Vous pouvez soit définir le fichier directement avec src, soit imbriquer un ou plusieurs éléments <source> entre les balises ouvrante (<audio>) et fermante (</audio>) pour que le navigateur choisisse un format qu'il prend en charge.
<audio>
<source src="URL" type="MIME-type">
<source src="URL" type="MIME-type">
</audio>Exemple de la balise HTML <audio>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Formats audio pris en charge
Chaque navigateur ne peut pas décoder tous les codecs, c'est pourquoi l'audio HTML dispose de trois formats qui comptent en pratique. Le tableau ci-dessous indique l'extension du fichier, le type MIME à renseigner dans type="" et la prise en charge globale :
| Format | Type MIME | Prise en charge |
|---|---|---|
| MP3 | audio/mpeg | Pris en charge par tous les navigateurs modernes. Le choix le plus sûr par défaut. |
| WAV | audio/wav | Pris en charge partout, mais les fichiers sont non compressés et volumineux. |
| OGG (Vorbis) | audio/ogg | Chrome, Firefox, Edge, Opera. Pas Safari. |
| WebM | audio/webm | Chrome, Firefox, Edge, Opera. Pas Safari. |
Comme le MP3 fonctionne partout, un simple <source src="audio.mp3" type="audio/mpeg"> est généralement suffisant. Des formats supplémentaires ne sont nécessaires que si vous souhaitez une alternative libre de droits (OGG/WebM) ou la meilleure qualité possible (WAV).
Comment le navigateur choisit un <source>
Lorsque vous imbriquez plusieurs éléments <source>, le navigateur les parcourt de haut en bas et lit le premier qu'il peut décoder — les autres sont ignorés. Placez votre format préféré ou le plus efficace en premier. L'attribut type permet au navigateur d'ignorer les formats qu'il ne prend pas en charge sans les télécharger, ce qui en fait une bonne pratique de toujours l'inclure.
<audio controls>
<source src="audio.webm" type="audio/webm"> <!-- tried first -->
<source src="audio.ogg" type="audio/ogg"> <!-- fallback -->
<source src="audio.mp3" type="audio/mpeg"> <!-- universal fallback -->
</audio>L'attribut controls
Sans controls, l'élément audio ne rend rien de visible et l'utilisateur n'a aucun moyen de le démarrer. L'attribut controls demande au navigateur d'afficher son interface de lecteur natif (lecture/pause, timeline, volume) :
<audio src="audio.mp3" controls></audio>Exemple de la balise HTML <audio> avec l'attribut controls
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>L'attribut loop
loop est un attribut boolean. Lorsqu'il est présent, le clip repart du début chaque fois qu'il se termine — pratique pour une ambiance sonore de fond ou un effet sonore en boucle :
<audio src="audio.mp3" controls loop></audio>L'autoplay et l'attribut muted
C'est la source de confusion la plus courante avec l'audio HTML, alors lisez attentivement.
L'attribut autoplay demande au navigateur de commencer la lecture dès que le média est prêt, sans que l'utilisateur appuie sur lecture :
<audio src="audio.mp3" autoplay></audio>En pratique, les navigateurs modernes bloquent l'autoplay avec du son. Chrome, Safari et Firefox refusent de lire automatiquement un média audible tant que l'utilisateur n'a pas interagi avec la page (un clic, un appui, une frappe de touche). Cela protège les utilisateurs des pages web qui diffusent du son de manière inattendue. Si vous définissez autoplay sur un clip audible, il restera généralement silencieux et en pause.
Le seul moyen fiable de faire fonctionner l'autoplay est de définir également muted. Un clip en sourdine ne produit aucun son, ce qui permet au navigateur de le démarrer automatiquement :
<!-- Autoplays in modern browsers because it is muted -->
<audio src="audio.mp3" controls autoplay muted></audio>L'attribut muted démarre simplement l'élément avec le volume coupé ; l'utilisateur peut réactiver le son via les contrôles. Pour l'audio spécifiquement, un clip en autoplay muet est rarement utile en lui-même, mais le principe vaut la peine d'être connu car la même règle s'applique à la balise <video>, où l'autoplay muet est omniprésent.
Si vous avez vraiment besoin que le son démarre, déclenchez la lecture depuis une action utilisateur. L'API JavaScript HTML DOM vous permet de scripter l'élément avec des méthodes comme .play() depuis un gestionnaire de clic, ce que le navigateur considère comme approuvé par l'utilisateur.
L'attribut preload
preload est le seul attribut de <audio> qui accepte une valeur plutôt qu'être un boolean. Il indique au navigateur quelle quantité du fichier il doit récupérer avant que l'utilisateur appuie sur lecture :
auto— le navigateur peut télécharger l'intégralité du fichier à l'avance. Utilisez-le quand vous anticipez que l'audio sera lu et souhaitez une lecture instantanée.metadata— récupère uniquement les métadonnées telles que la durée et les premiers octets, pas l'audio lui-même. Un bon compromis qui permet aux contrôles d'afficher la durée de la piste sans gaspiller de bande passante.none— ne rien précharger jusqu'à ce que l'utilisateur interagisse. Idéal quand la page comporte de nombreux clips ou quand la plupart des visiteurs n'écouteront pas l'audio.
<audio src="audio.mp3" controls preload="metadata"></audio>preload n'est qu'une indication — un navigateur peut l'ignorer pour économiser des données, et il est remplacé par autoplay, qui force le chargement du fichier.
Accessibilité
Un audio qui n'existe que sous forme sonore exclut toute personne qui ne peut pas l'entendre. Quelques ajouts rendent l'audio intégré accessible à tous :
- Fournissez une transcription textuelle. Pour les audios à dominante vocale (interviews, podcasts), publiez le texte près du lecteur afin que les utilisateurs de lecteurs d'écran et les personnes malentendantes accèdent au même contenu.
- Ajoutez des sous-titres avec
<track>. Un élément<track kind="captions">permet aux navigateurs d'afficher du texte synchronisé avec l'audio. - Étiquetez le lecteur avec
aria-labelquand il n'y a pas de légende visible, afin que les technologies d'assistance annoncent de quoi parle le clip. - Utilisez le texte de repli entre les balises comme dégradation gracieuse : les navigateurs qui ne peuvent pas lire l'élément l'affichent à la place.
<audio controls aria-label="Episode 12: Building accessible web audio">
<source src="podcast.mp3" type="audio/mpeg">
<track kind="captions" src="podcast.vtt" srclang="en" label="English">
Your browser does not support the audio element.
<a href="podcast.mp3">Download the audio</a> instead.
</audio>Attributs
La balise <audio> possède des attributs qui indiquent le chemin vers le fichier audio, le comportement de lecture, etc. Les attributs controls, autoplay, loop et muted sont boolean ; leurs valeurs peuvent être omises. Lorsqu'ils sont spécifiés, la fonction correspondante est activée par défaut.
| Attribut | Valeur | Définition |
|---|---|---|
| autoplay | Lit automatiquement le fichier audio après le chargement de la page. | |
| controls | Affiche le panneau de contrôle (lecture/pause, volume, etc.). Si l'attribut controls est absent, l'audio ne sera pas visible sur la page. | |
| loop | Répète le fichier audio en continu depuis le début après qu'il se termine. | |
| muted | Coupe le son de l'audio par défaut. | |
| preload | auto, metadata, none | Définit la stratégie de préchargement du fichier audio. |
| src | URL | Spécifie le chemin vers le fichier audio. |
La balise <audio> prend en charge les attributs globaux et les attributs d'événements.