<audio>
Intègre un lecteur audio dans la page. Supporte plusieurs formats et offre des contrôles natifs du navigateur.
Description
L’élément <audio> intègre du contenu sonore dans la page. Comme <video>, il peut utiliser src directement ou des <source> enfants pour plusieurs formats. L’attribut controls est indispensable pour que l’utilisateur puisse contrôler la lecture — sans lui, le lecteur est invisible.
Syntaxe
<audio src="musique.mp3" controls>
Votre navigateur ne supporte pas l'élément audio.
</audio>
Exemples
Audio multi-formats :
<audio controls preload="metadata">
<source src="podcast.ogg" type="audio/ogg">
<source src="podcast.mp3" type="audio/mpeg">
<p>Votre navigateur ne supporte pas l'audio HTML.
<a href="podcast.mp3">Télécharger le fichier MP3</a>.</p>
</audio>
Avec sous-titres (pour les podcasts) :
<audio controls>
<source src="episode.mp3" type="audio/mpeg">
<track kind="captions" src="episode.fr.vtt" srclang="fr" label="Sous-titres français" default>
</audio>
Attributs spécifiques
| Attribut | Type | Description |
|---|---|---|
src | URL | URL du fichier audio. |
controls | boolean | Affiche les contrôles natifs (lecture, pause, volume, durée). |
autoplay | boolean | Lance la lecture automatiquement. Déconseillé pour l’accessibilité. |
loop | boolean | Relit en boucle. |
muted | boolean | Démarre sans son. |
preload | enum | none, metadata ou auto. |
Notes
controls est presque toujours nécessaire : sans controls, aucune interface n’est visible. L’audio ne joue que si autoplay est présent, et sans contrôles, l’utilisateur ne peut pas arrêter la lecture — ce qui est une mauvaise pratique d’accessibilité.
Formats recommandés : proposer MP3 (support universel) et OGG (meilleure compression). OPUS dans un conteneur WebM/OGG offre la meilleure qualité/poids mais le support est plus limité.
Support navigateurs
Chrome3+ · Firefox3.5+ · Safari3.1+ · Edge12+