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.

1/6 | Suivant

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é.

Le code est un peu fastidieux, et donc la plupart du temps on passe par un plugin jquery, qui se charge de créer les boutons et accompagne le tout d’une feuille de style. Il en existe plusieurs, on s’arrêtera sur audio.js.

Audiojs se compose d’un fichier .js, d’un fichier image contenant le bouton play, pause, attente, etc. et d’un lecteur flash utilisé au cas où le navigateur est trop vieux pour supporter la balise audio (le fameux fallback).
En plaçant le dossier qui contient ces trois fichiers au même endroit que la page html, on codera comme suit :

<script src="audiojs/audio.min.js"></script>
       <script>
           audiojs.events.ready(function() {
               var as = audiojs.createAll();
           });
       </script>

Audio.js crée pour chaque balise audio un ensemble de tag html qui servent de boutons, et qui remplacent la balise audio, que l’on peut cacher. Des comportements css sont aussi ajoutés par le script. On peut ensuite personnaliser le comportement css soi-même.

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.