Balise HTML <audio>
La balise <audio> est l'un des éléments HTML5 ajoutés pour permettre l'intégration de fichiers audio dans une page web. Comme tous les navigateurs ne prennent pas en charge tous les formats audio, le fichier audio est encodé à l'aide de codecs spéciaux.
La <source> balise ou l'attribut src est utilisé pour indiquer les variantes du même fichier audio. Le chemin vers un fichier audio peut contenir des URL absolues ou relatives.
Syntaxe
La balise <audio> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<audio>) et la balise de fermeture (</audio>).
Balise HTML <audio>
<audio>
<source src="URL">
<source src="URL">
</audio>Exemple de la balise HTML <audio> :
Exemple de la balise HTML <audio> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://fr.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="https://fr.w3docs.com/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>L'attribut loop
L'utilisation de l'attribut loop fera jouer le fichier audio en boucle :
Balise HTML <audio>
<audio src="audio.mp3" autoplay loop></audio>Affichage des contrôles du navigateur
Vous pouvez permettre au navigateur d'afficher des contrôles à l'utilisateur, tels que le volume ou lecture/pause. Cela se fait à l'aide de l'attribut controls.
Code d'affichage des contrôles du navigateur
<audio src="audio.mp3" controls></audio>Exemple de la balise HTML <audio> avec l'attribut controls :
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="https://fr.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Plusieurs formats de fichiers
Avec la balise <audio>, vous pouvez définir plusieurs formats pour le même fichier audio.
Exemple de plusieurs formats de fichiers
<audio controls>
<source src="audio.ogg">
<source src="audio.mp3">
</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 booléens ; leurs valeurs peuvent être omises. S'ils sont spécifiés, la fonction correspondante est activée par défaut.
| Attribut | Valeur | Définition |
|---|---|---|
| autoplay | Lit le fichier audio automatiquement 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 une fois terminé. | |
| muted | Coupe le son 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énement.
Pratique
Quelles sont les propriétés de la balise audio HTML ?