La balise audio

Objectif

  • Découvrir la balise audio et son fonctionnement

Mise en situation

Il est possible d'ajouter de l'audio dans une page HTML grâce à la balise dédiée. Il sera possible de paramétrer son utilisation à l'aide d'attributs.

DéfinitionLa balise <audio>

La balise <audio> permet d'ajouter des sons à une page HTML sous forme de lecteur audio. Cette balise peut prendre la propriété optionnelle controls afin de faire apparaître les commandes sur le lecteur audio.

Il faut ajouter au moins une balise <source> entre les balises <audio> et </audio>, afin de définir la source et le type de média audio à importer.

Le texte placé entre les balises au même niveau que les sources sera le message d'erreur qui s'affichera si la balise ne peut pas être affichée sur le navigateur.

Tous les formats audio ne sont pas supportés par tous les navigateurs : afin de vérifier si la balise est compatible avec le navigateur cible, il faut regarder sur le site CanIUse.

Exemple

1
<audio controls>
2
  <source src="music.ogg" type="audio/ogg">
3
  <source src="music.wav" type="audio/wav">
4
  <source src="music.mp3" type="audio/mpeg">
5
  Message à afficher en cas de non support de la balise par le navigateur.
6
</audio>

Ajoutons maintenant du son à notre blog. Nous pouvons ajouter notre musique traditionnelle préférée, par exemple :

1
<audio controls>
2
  <source src="sound.mp3" type="audio/mpeg">
3
  Your browser does not support the audio element.
4
</audio>
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <!-- ... -->
5
  </head>
6
  <body>
7
    <header>
8
      <h1>Mon premier voyage au Japon</h1>
9
    </header>
10
    <div>
11
      <!-- ... -->
12
      <h2>Et voici ma chanson traditionnelle préférée</h2>
13
      <div>
14
        <p>
15
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
16
          Suspendisse finibus pulvinar nisl, vehicula molestie nunc convallis nec.
17
          Phasellus non lacinia lorem. In nec eros id lectus convallis euismod.
18
          Nunc at felis non eros lobortis gravida.
19
        </p>
20
        <audio controls>
21
          <source src="sound.mp3" type="audio/mpeg">
22
          Your browser does not support the audio element.
23
        </audio>
24
      </div>
25
      <!-- ... -->
26
    </div>
27
  </body>
28
</html>

SyntaxeÀ retenir

  • Pour ajouter du son à une page web, nous utilisons la balise <audio> accompagnée d'au moins une balise <source>, qui détermine le chemin et la nature du fichier son à jouer.

Complément

Documentation balise <audio>