HTML - Élément Audio

Bonjour, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde merveilleux des éléments audio HTML. En tant que quelqu'un qui enseigne cela depuis des années, je peux vous dire que l'ajout de sons à vos pages web peut vraiment les rendre vivantes. Alors, c'est parti !

Syntaxe

L'élément HTML <audio> est utilisé pour intégrer du contenu audio dans les documents. C'est une ajout relativement récent à HTML, introduit dans HTML5, et il a changé la donne pour l'inclusion de l'audio sur les sites web.

Voici la syntaxe de base :

<audio src="audio_file.mp3" controls>
Votre navigateur ne supporte pas l'élément audio.
</audio>

Reprenons cela :

• <audio> : C'est l'étiquette ouvrante de l'élément audio.
• src="audio_file.mp3" : Cet attribut spécifie la source du fichier audio.
• controls : Cet attribut ajoute des contrôles audio, comme lecture, pause et volume.
• Le texte entre les étiquettes ouvrante et fermante est affiché si le navigateur ne supporte pas l'élément audio.

Comment intégrer un audio en HTML ?

Maintenant que nous connaissons la syntaxe de base, examinons comment intégrer réellement un audio dans votre document HTML. Il y a quelques méthodes différentes pour ce faire, et je vais vous montrer chacune d'elles.

Méthode 1 : Utilisation de l'attribut src

C'est la méthode la plus simple :

<audio src="chemin/vers/audio.mp3" controls></audio>

Méthode 2 : Utilisation de l'élément <source>

Cette méthode vous permet de spécifier plusieurs sources audio :

<audio controls>
<source src="chemin/vers/audio.mp3" type="audio/mpeg">
<source src="chemin/vers/audio.ogg" type="audio/ogg">
Votre navigateur ne supporte pas l'élément audio.
</audio>

Dans cet exemple, le navigateur essaiera de lire le fichier MP3 en premier. S'il ne peut pas, il passera au fichier OGG. S'il ne peut pas lire l'un ni l'autre, il affichera le message texte.

Méthode 3 : Utilisation de JavaScript

Pour un contrôle plus avancé, vous pouvez utiliser JavaScript :

<audio id="myAudio">
<source src="chemin/vers/audio.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>

<button onclick="playAudio()">Lecture</button>

<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
</script>

Cette méthode vous offre une plus grande flexibilité dans le contrôle du moment et de la manière où l'audio est joué.

Exemples de l'élément Audio HTML

Voyons quelques exemples de plus pour renforcer notre compréhension.

Exemple 1 : Lecteur audio de base

<audio controls>
<source src="cheval.ogg" type="audio/ogg">
<source src="cheval.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>

Cela crée un lecteur audio de base avec des contrôles. Il essaie de lire un fichier OGG en premier, puis un MP3 si OGG n'est pas supporté.

Exemple 2 : Lecture automatique et boucle

<audio controls autoplay loop>
<source src="background_music.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>

Cette audio commence à jouer automatiquement lorsque la page se charge et se boucle continuellement. Soyez prudent avec la lecture automatique, cependant - elle peut être agaçante pour les utilisateurs !

Exemple 3 : Attribut preload

<audio controls preload="auto">
<source src="interview.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'élément audio.
</audio>

L'attribut preload indique au navigateur quoi faire lorsque la page se charge. "auto" signifie que le navigateur doit charger le fichier audio entier.

Support des navigateurs pour différents formats audio

Maintenant, voici quelque chose d'important à comprendre : tous les navigateurs ne supportent pas tous les formats audio. Voici un tableau pour le décomposer :

Format	Chrome	Firefox	Safari	Opera	Internet Explorer
MP3	Oui	Oui	Oui	Oui	Oui (9+)
WAV	Oui	Oui	Oui	Oui	Non
OGG	Oui	Oui	Non	Oui	Non

Comme vous pouvez le voir, MP3 est le format le plus largement supporté. C'est pourquoi il est souvent une bonne idée d'inclure une version MP3 de votre audio.

Voici un conseil de pro de mes années d'enseignement : toujours fournir au moins deux formats différents de votre fichier audio. Ainsi, vous couvrez la plupart des bases en termes de support des navigateurs.

En conclusion, l'élément audio HTML est un outil puissant pour ajouter du son à vos pages web. Que vous créiez un lecteur de musique, ajoutez de la musique de fond ou incluez des clips audio dans votre contenu, comprendre comment utiliser l'élément <audio> est essentiel.

Souvenez-vous, la clé pour maîtriser cela (et tout concept de codage) est la pratique. Alors, allez-y, essayez d'intégrer de l'audio dans vos documents HTML. Jouez avec les différents attributs et méthodes que nous avons discutés. Et surtout, amusez-vous ! Qui sait, vous pourriez être la prochaine personne à créer un site web audio viral !

Credits: Image by storyset