<audio>
Intégrer de l'audio : podcast, musique, et les pièges d'accessibilité
<audio> + <source> + <track> — L'audio
La balise <audio> intègre un lecteur audio natif. <source> permet de proposer plusieurs formats et <track> ajoute des sous-titres ou une transcription au format WebVTT.
Quand l'utiliser
Tu veux intégrer un podcast, un extrait musical ou un message vocal. L'attribut controls est obligatoire : sans lui, l'utilisateur n'a aucun moyen de mettre en pause ou d'ajuster le volume. L'autoplay est interdit : un son qui démarre sans consentement est une agression, en particulier pour les utilisateurs de lecteurs d'écran.
Ce que tu gagnes
Accessibilité : controls expose les commandes au clavier et aux technologies d'assistance. Un <track> de sous-titres rend le contenu audio accessible aux personnes sourdes. Sans transcription, ton podcast n'existe pas pour elles.
Exemple de code
<audio controls preload="metadata">
<source src="/audio/episode-42.opus" type="audio/ogg; codecs=opus" />
<source src="/audio/episode-42.mp3" type="audio/mpeg" />
<track
kind="subtitles"
src="/audio/episode-42.vtt"
srclang="fr"
label="Transcription"
default
/>
<p>Your browser does not support the audio element.</p>
</audio>