Lecteur audio HTML 5

Une des nouveauté de la norme HTML5 est l’apparition des balises <video> et <audio>. Même si le net regorge de tutoriels et de lecteurs précodés, un petit topo est fait ici.

Html5 et la prise en compte des usages

HTML5 est une norme qui tente de réconcilier la rigueur (comment les choses devraient être conceptualisées et architecturées dans le code) avec les usages (comment ça se passe concrètement). La balise audio comme la balise vidéo remettent les pendules à l’heure : il doit y avoir une balise dédiée à l’usage massif de sons, jusqu’ici résolu par présence du plugin Flash, une solution propriétaire.

La balise audio, qui fait partie des nouveautés de HTML 5, est compatible avec les navigateurs depuis les versions suivantes : Chrome 7, Opéra 11, Safari 5, Internet explorer 9, Firefox depuis la version 3.6.

Deux conteneurs pour contenter tout le monde

Avec la balise audio, on ne peut pas contenter tous les navigateurs avec un format de fichier. Le format MP3 est quasi reconnu partout, mais pas par Opera et certaines versions de Firefox. On comblera ces lacunes par l’adjonction dans la balise audio d’un fichier au format OGG.

<audio controls="controls">
  <source src="mon.mp3" type="audio/mp3" />
  <source src="monogg.ogg" type="audio/ogg" />
 Mettez à jour votre navigateur
</audio>

Paramétrage du lecteur

Comme pour la vidéo, on peut spécifier quelques paramètres :
autoplay permet la lecture automatique du fichier au chargement de la page
controls affiche les boutons de contrôle (play, pause) du lecteur
loop permet la lecture en boucle
preload permet le préchargement du fichier son dès le chargement de la page

<audio controls="controls" autoplay="autoplay" loop="loop" preload="none">
  <source src="mon.mp3" type="audio/mp3" />
  <source src="monogg.ogg" type="audio/ogg" />
 Mettez à jour votre navigateur
</audio>

Fallback

Un fallback est techniquement une solution quand rien ne marche. En audio, le fallback consiste à faire appel à un lecteur flash, qui est bien reconnu partout dont un bon nombre de vieux navigateurs. Cette opération est fastidieuse, et de moins en moins nécessaire, heureusement.

Du javascript pour faire joli

L’interface du lecteur audio est produite par le navigateur. Ce n’est pas toujours d’une folle élégance. La plupart du temps, on utilise javascript pour pouvoir rendre plus joli le lecteur, ou créer des playlist.

La logique est simple : on crée une petite interface avec des boutons, et on cache le lecteur lui-même. Javascript se charge de faire le relai entre les jolis boutons et le tag audio caché, grâce à une classe ou une id qui lui est assigné.

Voici le code html

<article class="lecteur">
               <audio controls>
                   <source src="musique/leaves.mp3" type="audio/mp3">
               </audio>
               <div class="boutons">
                   <div class="play">Play</div>
                   <div class="pause">Pause</div>
               </div>
           </article>

et un code javascript d’exemple (il faut avoir chargé jquery auparavant) :

<script>
           $(document).ready(function(){
               $(".lecteur").each(function(){ // code pour plusieurs lecteurs dans la même page
                   var a=$(this).find("audio").get(0);
                   a.removeAttribute("controls"); // retirer le lecteur standard
                   // ajouter un click sur le bouton play
                   $(this).find(".play").click(function(){
                       a.play();
                   });
                   // ajouter un click sur le bouton pause
                   $(this).find(".pause").click(function(){
                       a.pause();
                   });
               });
           });
       </script>

Pour rendre tout ça plus élégant, ou plus riche (avec affichage du temps écoulé, etc.) on se reportera à l’article suivant.

Convertir en mp3 ou Ogg

Pour convertir des fichiers audio, il existe des solution gratuites, comme utiliser Itunes, ou encore le logiciel PC super, ou encore Audio Converter pour mac. Il existe même un convertisseur pour l’OGG en ligne accessible ici.