Découvez les bases et les nouveautés du HTML5 dans ce tutoriel.
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
Exemple
<audio title="Noir Désir" preload="auto" controls loop>
<source src="medias/le_vent_nous_portera.mp3" type="audio/mp3">
<p>Votre navigateur est trop ancien pour lire ce fichier</p>
</audio>
La balise <figure> est en fait une unité de contenu, un encart pour isoler un bloc avec un contenu principalement constitué de un ou plusieurs éléments : multimédias, diagrammes, tableaux, illustrations, exemples, codes, images, vidéos, ou carrément du texte.
la balise <figcaption> permet d'afficher une légende ou une description du contenu de la figure.
Exemple
<figure>
<audio title="Noir Désir" preload="auto" controls loop>
<source src="medias/le_vent_nous_portera.mp3" type="audio/mp3">
<p>Votre navigateur est trop ancien pour lire ce fichier</p>
</audio>
<figcaption>Lire un fichier audio</figcaption>
</figure>
Si tous les navigateurs ne sont pas compatibles avec un même codec, il peut parfois être judicieux de le remplacer par un autre. Dans l'exemple ci-dessous, si on ne peut pas lire le format mp3, on passera au format ogg.
<audio title="Noir Désir" preload="auto" controls loop>
<source src="medias/le_vent_nous_portera.mp3" type="audio/mp3">
<source src="medias/le_vent_nous_portera.ogg" type="audio/ogg">
<p>Votre navigateur est trop ancien pour lire ce fichier</p>
</audio>
| Attribut | Valeur | Description |
|---|---|---|
| autoplay | autoplay | Précise si la lecture se lance automatiquement |
| controls | controls | Indique si les boutons de contrôles (lecture, arret …) doivent être visibles. |
| loop | loop | Indique si le fichier doit tourner en boucle. |
| preload |
|
Permet d’indiquer au navigateur de précharger en arrière plan le fichier media. L’attribut preload peut prendre 3 valeurs : |
| src | url | Chemin ver le fichier audio |