L'attribut controls est un attribut booléen introduit en HTML5. Sa présence seule suffit à demander au navigateur d'afficher son lecteur audio intégré — barre de progression, boutons play/pause, réglage du volume. Sans lui, le fichier audio se charge en arrière-plan mais rien n'apparaît à l'écran.
Étape 1 — Comprendre ce que fait controls : avec et sans l'attribut
En résumé : sans controls, l'élément <audio> est invisible dans la page. Le navigateur charge l'audio mais n'affiche aucune interface. Avec controls, il injecte automatiquement son propre lecteur.
C'est une différence importante à saisir dès le départ. L'élément <audio> seul ne produit rien de visible. Il faut soit ajouter controls pour obtenir l'interface native du navigateur, soit piloter la lecture en JavaScript si on veut une interface personnalisée.
Les commandes affichées varient légèrement d'un navigateur à l'autre, mais on retrouve généralement :
- Un bouton Lecture / Pause
- Une barre de progression (cliquable pour chercher)
- Un contrôle de volume
- La durée totale et le temps écoulé
Exemple — sans controls (invisible) : 📋 Copier le code
<audio> <source src="son.mp3" type="audio/mpeg"> </audio>
Résultat attendu : la page s'affiche normalement, sans aucun lecteur visible. L'élément existe dans le DOM mais reste invisible.
Étape 2 — Ajouter controls pour afficher le lecteur natif du navigateur
L'attribut controls est un attribut booléen : sa présence dans la balise suffit à l'activer. Trois formes d'écriture sont équivalentes en HTML5 :
<audio controls>— forme recommandée, la plus courte<audio controls="controls">— compatible XHTML, toujours valide<audio controls="">— valeur vide, également acceptée
La forme recommandée aujourd'hui est simplement controls sans valeur. Les trois sont équivalentes : le navigateur ne regarde que la présence ou l'absence de l'attribut, pas sa valeur.
Exemple — avec controls : 📋 Copier le code
<audio controls> <source src="son.ogg" type="audio/ogg"> <source src="son.mp3" type="audio/mpeg"> Votre navigateur ne supporte pas la balise audio. </audio>
Résultat attendu : le navigateur affiche un lecteur audio intégré avec une barre de progression, un bouton play/pause et un contrôle de volume. L'apparence exacte dépend du navigateur — Chrome, Firefox et Safari ont chacun leur style visuel.
Étape 3 — Pourquoi fournir deux formats de source ?
Tous les navigateurs ne lisent pas les mêmes formats audio. En proposant un fichier .ogg puis un fichier .mp3, on s'assure qu'au moins un des deux sera lu, quel que soit le navigateur. Le navigateur teste les sources dans l'ordre et s'arrête à la première qu'il sait lire.
- OGG Vorbis (
audio/ogg) : Firefox, Chrome, Opera - MP3 (
audio/mpeg) : Chrome, Safari, Edge, Firefox (depuis 2012)
Le texte de repli « Votre navigateur ne supporte pas la balise audio » n'est affiché que si le navigateur ignore complètement la balise <audio> — ce qui ne concerne plus aucun navigateur moderne.
Exemple complet avec deux sources : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple audio controls</title>
</head>
<body>
<audio controls>
<source src="son.ogg" type="audio/ogg">
<source src="son.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la balise audio.
</audio>
</body>
</html>
Résultat attendu : un lecteur audio apparaît dans la page. En cliquant sur le bouton play, la lecture démarre si les fichiers son.ogg ou son.mp3 existent dans le même dossier que la page HTML.
Remarque pratique : pour tester localement, remplacez son.ogg et son.mp3 par les noms de vos propres fichiers audio placés dans le même répertoire que votre fichier HTML.
Étape 4 — Combiner controls avec d'autres attributs de <audio>
controls se combine librement avec les autres attributs booléens de <audio>. Voici les plus utiles :
autoplay: démarre la lecture automatiquement au chargement de la page. La plupart des navigateurs bloquent l'autoplay avec son — il faut ajoutermutedpour le permettre.loop: relit le fichier audio en boucle automatiquement.muted: coupe le son au démarrage. L'utilisateur peut réactiver le volume viacontrols.preload: indique au navigateur si et comment précharger l'audio (auto,metadata,none).
Exemple — controls + loop + muted : 📋 Copier le code
<audio controls loop muted> <source src="son.ogg" type="audio/ogg"> <source src="son.mp3" type="audio/mpeg"> </audio>
Résultat attendu : le lecteur s'affiche avec le volume coupé (icône muet visible). L'utilisateur peut réactiver le son et la lecture reprend en boucle à la fin du fichier.
Récapitulatif : les deux situations à retenir
Script complet — avec et sans controls : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Audio controls — exemples</title>
</head>
<body>
<h2>Avec controls — lecteur visible</h2>
<audio controls>
<source src="son.ogg" type="audio/ogg">
<source src="son.mp3" type="audio/mpeg">
</audio>
<h2>Sans controls — rien ne s'affiche</h2>
<audio>
<source src="son.ogg" type="audio/ogg">
<source src="son.mp3" type="audio/mpeg">
</audio>
<h2>Avec controls + loop + muted</h2>
<audio controls loop muted>
<source src="son.ogg" type="audio/ogg">
<source src="son.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Résultat attendu : deux lecteurs visibles (le premier normal, le troisième en sourdine avec boucle), et un élément invisible entre les deux. C'est la démonstration directe de l'effet de controls.
Par carabde : 10 mars 2014 | Mis à jour le 28 juin 2025