Audio Player, un lecteur audio HTML5 customisé avec jQuery

Audio Player est un plugin jQuery qui permet de personnaliser le lecteur audio généré par la balise HTML5 audio. Ainsi, vous pouvez créer un lecteur totalement custom et cross-browser qui hérite parfaitement des capacités HTML5 natives comme le préchargement du fichier, la lecture automatique ou encore la boucle de lecture.

HTML5… et une surcouche JS

Le plugin Audio Player ajoute à l’élément audio (flux ou streaming audio) quelques lignes de code HTML, puis avec un peu de CSS3 (transition, box-shadow, gradient), il permet d’obtenir un lecteur flambant neuf et personnalisé, tout en gardant les mêmes fonctionnalités du lecteur HTML5 de base. Il n’existe aucun moyen direct pour styliser le lecteur, c’est pourquoi l’outil utilise une surcouche JS. Cependant, le DOM HTML5 possède des méthodes, des propriétés et des événements pour manipuler facilement le lecteur.

audio_player_responsive

En effet, la balise audio HTML5, tout comme un select, un radio ou une checkbox, n’est pas « personnalisable ». Chaque navigateur l’interprète à sa manière. Voici le rendu généré par Firefox, Chrome et Opera. On distingue quelques différences, même si globalement les lecteurs arborent un style assez proche, avec un fond sombre et des boutons de contrôle clairs :

audio_players_browsers

La balise audio sur Firefox, Chrome et Opera

Ainsi, le plugin Audio Player vous donne la possibilité de réaliser un lecteur audio avec un style unique et ce, sur tous les navigateurs. À noter que la feuille de style fournie n’utilise aucune image pour les icônes ; c’est du full CSS. Libre à vous de la modifier pour créer votre propre player : typographie, taille et emplacement des éléments, couleurs, transitions, etc. Voici les caractéristiques principales du lecteur :

  • Natif : le plugin prend en compte les attributs (src, autoplay, boucle, preoload) et les balises (source) de l’élément audio.
  • Responsive : le lecteur s’adapte automatiquement à n’importe quelle résolution d’écran.
  • Tactile : le lecteur peut être utilisé aussi bien sur sur tablette que sur smartphone grâce à un support tactile.
  • Léger : pas de Flash, pas d’images ; le plugin en version minifié fait 4Kb.

Mise en place du lecteur

On commence par déclarer le framework jQuery et le plugin Audio Player :

<script src="jquery.js"></script>
<script src="audioplayer.js"></script>

On définit la structure HTML du lecteur avec la balise HTML5 audio. L’attribut controls permet l’affichage des boutons de contrôle (lecture, pause, volume) et vous pouvez également utiliser autoplay et loop pour gérer la lecture automatique et la boucle de lecture. Il faut bien penser à spécifier les différents formats pour avoir un support navigateur optimal.

<audio preload="auto" controls>
   <source src="audio.wav" />
   <source src="audio.mp3" />
   <source src="audio.ogg" />
</audio>

Et la dernière étape consiste à appeler le plugin avec quelques paramètres optionnels (une quinzaine), notamment l’option classPrefix qui permet de préfixer la classe CSS de l’élément parent générée autour de la balise audio, ainsi que les éléments enfants.

$( 'audio' ).audioPlayer({
   classPrefix: 'audioplayer',
   strPlay: 'Play',
   strPause: 'Pause',
   strVolume: 'Volume'
});

C’est terminé, votre lecteur est fonctionnel ! Voici un exemple de code HTML généré par le plugin avec les différents éléments que l’on peut « skinner ». À noter que l’on peut également utiliser des classes CSS qui sont utilisées sur certains événements : audioplayer-playing quand le player est en lecture, audioplayer-stopped quand il est en pause ou pas encore démarré… etc.

<div class="audioplayer audioplayer-stopped">
   <audio src="audio.wav" preload="auto" controls></audio>
   <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
   <div class="audioplayer-time audioplayer-time-current">00:00</div>
   <div class="audioplayer-bar">
       <div class="audioplayer-bar-loaded"></div>
       <div class="audioplayer-bar-played"></div>
   </div>
   <div class="audioplayer-time audioplayer-time-duration">&hellip;</div>
   <div class="audioplayer-volume">
       <div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>
       <div class="audioplayer-volume-adjust"><div><div></div></div></div>
   </div>
</div>

Dernière chose à savoir, le player se dégrade sur les anciens navigateurs qui ne prennent pas en charge la balise audio, avec un mode « mini » où l’on retrouve uniquement un bouton « Play / Pause » (élément embed). Avec une installation très simple, Audio Player est une façon efficace de personnaliser un lecteur audio HTML5… Amusez-vous !

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, Safari, IE9+
Démonstration : http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/
Licence : MIT

Commentaires