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

  • fabrice

    Bonjour,
    petite question: -est-il possible de jouer plus d’un morceau ?

    • Bonne question. Je ne crois pas que la balise audio le permette nativement mais c’est peut-être possible de le faire avec une surcouche JavaScript.

      • iF

        en mettant dans l’attribut « src » le lien des différents éléments audio à la suite, séparés d’un &, ça ne le fera pas?

    • typeQuiTrouveLaVideo

      J’ai développé une alternative à la un version pour jouer plus d’un morceau… En suivant l’exemple ici : http://brijbhushan.net/2013/02/24/html5-set-multiple-audiovideo-files-dynamically-and-run-one-by-one/ . Sinon merci pour ce super tuto !

  • Mc MikyMike Michaël Lalonde

    où je dois entrer l’adresse de mon stream audio

    • Dans l’attribut src de la balise audio.

  • Azalgath

    J’ai un petit problème avec le lecteur sur firefox. Il s’affiche bien sur google chrome et safari cependant le lecteur ne s’affiche pas sur firefox. J’ai un message d’erreur disant :
     » $( … ).audioPlayer is not a function »

    D’ou vient le problème alors qu’il marche très bien sur les autres navigateurs ?
    J’ai la dernière mise a jour de firefox*

  • grand

    comment recupere on les fichier js ?

  • moi

    C’est possible d’avoir un zip? parce qu’il manque la moitié des plugins js et css pour avoir un véritable exemple, et non 2 ou 3 morceaux de code en vrac sur une page !

  • Incroyable Hulk

    C’est un super lecteur, simplement, je crois que l’autoplay ne fonctionne pas comme il faut. Quand on met autoplay dans la balise audio, on ne peut plus l’arrêter avec le bouton pause (Firefox / Mac OS 10.9.2). C’est vraiment dommage !

  • Lotfi

    Merci pour ces infos surement utile pour les « professionnels » mais pour moi débutant je patauge dans la semoule…

  • Sergioplayer

    Bonjour je l’ai installé sur mon site et j’ai customisé les couleurs et la taille du player. J’en ai mis jusqu’à une dizaine sur une page. Les audio sont un peu long à charger mais ça marche très bien sur firefox. En revanche les morceaux ne se chargent pas sur safari :(. C’est aussi le cas pour la demo qui est fournie. Donc mes bidouilles n’ont pas affecté le code. Je suis Mountain lion. Si quelqu’un à une idée …
    Merci par avance
    Sergio