HTML

HTML5

HTML5 : La balise Audio

Poète guitariste bien avant d’être analyste-programmeur, je me souviens des premiers balbutiements du Web et de ma tentative d’y publier mes compositions. Il y a 19 ans c’était essentiellement sur un serveur gratuit, pour la plupart fermés aujourd’hui comme le célèbre multimédia. Mais tout de même, il reste un exemple sur CHEZ.com toujours en ligne (2015). Parce que c’est carrément impossible de modifier ou détruire le site ; -) Sacré Web, cimetière de liens! Aucun formulaire ni adresse de contact avec CHEZ.com! Enfin, tout ça pour dire que le Web de l’époque était très décevant pour un musicien. Ironie du sort, la conception de mon premier site Web professionnel « Musikenligne.com » n’avait pas d’audio non plus! C’est seulement en 1999 que Flash me permit d’ajouter du son, sur le site du Musée du bas-Saint-Laurent.

Il faut se souvenir qu’à cette époque pas si lointaine, l’audio dans une page web était à la merci d’un plugiciel. Si QuickTime a réussi une certaine percée plus ou moins portable, ou encore Real Audio pendant quelques années, c’est davantage Flash de Macromedia qui permettait de diffuser pendant les années 2000 de la musique. Et ça marchait, sur plus de 95 % des navigateurs de la planète! Les navigateurs de l’époque installaient tout simplement le plugiciel Flash (et Shockwave) par défaut! Flash est d’ailleurs toujours utilisé pour lire un format MP3 à l’aide d’un lecteur Flash si jamais le navigateur ne supportait pas la balise audio.

Cette époque est bel et bien révolue, grâce au HTML5 et la balise <audio>. L’idée est simple, une balise <audio> qui propose plusieurs formats. Le navigateur jouera le premier compatible, sinon il affiche « Votre navigateur ne supporte pas la balise <audio> ». Le tout avec une belle barre de contrôle, jouer, pause, chargement, durée, volume etc.

Exemple avec la Bolero de Ravel

<audio preload="auto" controls="controls" type="audio/mpeg">
  <source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
  <source type="audio/ogg" src="http://www.archive.org/download/bolero_69/Bolero.ogg">
  Votre navigateur ne supporte pas la vidéo HTML5
  On peut ici placer un lecteur Flash
  pour les navigateurs incompatibles.
</audio>

Compatibilité

Internet Explorer 8 et les versions antérieures ne supportent pas la balise <audio>.

DOM et javascript

La balise <audio> a définitivement l’avantage d’être un élément du « document object model » (DOM) à part entière. C’est-à-dire qu’il est possible de manipuler le son en Javascript à l’aide des événements comme tout éléments HTML. Par exemple en ajoutant des « écouteur » (listener) des événements « oncanplay » ou « oncanplaythrough ». Pour savoir si le son a été chargé, ajouter un écouteur pour l’événement « onloadeddata » :

<audio oncanplay="twCanPlay()"
       oncanplaythrough="twCanPlayThrough()"
       onloadeddata="twOnLoadedData()"
       src="fichier.mp3"
       controls>
</audio>

<script>
function twCanPlay() { console.log("Prêt à jouer"); }
function twCanPlayThrough() { console.log("Prêt à jouer au complet"); }
function twOnLoadedData() { console.log("Le fichier est chargé"); }
</script>

Le chargement de son dans le DOM provoque la suite d’événements suivants :

1. loadstart
2. durationchange
3. loadedmetadata
4. loadeddata
5. progress
6. canplay
7. canplaythrough

Lire le tutoriel « HTML5 - Lecteur audio » pour plus d’informations sur le sujet.