Survol de l'audio en HTML 5

Si vous me lisez régulièrement, vous connaissez sûrement ma passion pour la musique. J'ai constamment mes écouteurs sur les oreilles, j'ai été impliqué dans la scène musicale québécoise pendant quelques années et j'ai exploré mon talent à travers quelques instruments (en tant que musicien amateur qui ne deviendra jamais une rock star).

Donc c'est tout naturel pour moi de m'intéresser à la nouvelle façon d'intégrer de la musique dans une page web, à l'aide de la balise audio du markup HTML 5.

Ce qui est bien, c'est qu'il n'est plus nécessaire d'avoir un lecteur Flash pour charger les audios et les vidéos puisque les fureteurs les supporteront nativement. Voyez le rendu des lecteurs audios par défaut sous les versions les plus récentes des fureteurs compatibles :



Pour intégrer du contenu musical, le markup HTML sera composé d'un conteneur audio et d'une source de données.

<audio id="music" controls autoplay>
<source src="/files/mp3/Arcade Fire/The Suburbs/09-Suburban War.ogg" />
<source src="/files/mp3/Arcade Fire/The Suburbs/09-Suburban War.mp3" />
</audio>

À part Safari, tous supportent le format libre OGG. C'est pourquoi on peut aussi spécifier un format alternatif comme le mp3. Le fichier doit être physiquement sur le disque, ce qui implique qu'on doit doubler l'espace disque nécessaire. J'ai aussi essayé de fournir une source audio dont le téléchargement était contrôlé par PHP mais aucun des lecteurs n'a bien réagit.

Dans la balise audio, l'attribut "controls" est recommandé car il permet de faire afficher le lecteur à l'écran. Sinon, la musique jouera en arrière-plan. On peut le combiner avec l'attribut "autoplay" pour faire jouer automatiquement le clip audio dès le chargement de la page. Si on omet d'écrire "controls" et qu'on combine les attributs "autoplay" et "loop" (lecture en boucle), ça risque de rappeler à certains l'époque du MIDI intégré qu'on ne pouvait pas interrompre et qui achalait tout le monde (genre, tellement 1995).

Enfin, la dernière chose que je voulais parler dans ce survol de la balise audio est qu'on peut contrôler certaines actions par JavaScript, comme pour les boutons Play et Pause :

<a id="playButton" href="#">Lecture</a>
<a id="pauseButton" href="#">Pause</a>

JavaScript (avec jQuery) :

$(document).ready(function(){
    $('#playButton').click(
        function(){
            // vérifier l'état de la lecture
            if( $('#music').get(0).paused ){
                $('#music').get(0).play();
            }
        }
    );

    $('#pauseButton').click(
        function(){
            if( !$('#music').get(0).paused ){
                $('#music').get(0).pause();
            }
        }
    );
});