Un Player Audio personnalisable en CSS

Article Player Personnalisé

HTML5 a amené son lot de nouveautés, parmi elles figure une panoplie de balises. Dans cet article nous allons nous intéresser à l’une d’elles : la balise <audio>.

Cette balise révolutionne ainsi la lecture des fichiers audio sur internet puisque son installation et son utilisation sont enfantines.

De Flash à HTML5

Avant cela il fallait obligatoirement passer par la case Flash. C’était toujours la même histoire. Soit on récupérait le code généré par le logiciel d’Adobe, soit on le développait nous-même.

Le code se composait de <object> contenant un bon nombre de paramètres sous forme de balises. Même si cette technologie était indispensable, s’en servir n’a jamais été franchement optimisé puisqu’elle rend le code lourd et le travail exécutif du navigateur particulièrement long.

De plus, Flash est toujours ignoré par iOS, et étant très bien implantée sur le marché, la firme de Cupertino est elle trop importante pour être ignorée.

Finalité, l’arrivée de l’HTML5 et de ses nouvelles balises ne pouvait que nous réjouir.

La balise Audio HTML5

Comme expliqué précédemment, pour mettre en place la balise audio, rien de plus simple.

Cet article n’a pas pour vocation de vous expliquer de fond en comble l’utilisation d’une telle balise, si vous désirez en savoir plus, n’hésitez pas à rechercher vous-même d’avantage d’information avec la requête suivante : “HTML5 audio balise“. Vous pouvez également vous lire cet article de Stanislas Quastana.

Présentation de Audio Player

Certains penseront qu’un peu de CSS suffirait à styliser le player. En principe oui, puisque le CSS sert à ça, mais dans notre cas nous n’avons qu’un élément audio. La tâche s’avère un peu plus difficile non ?

AudioPlayer.js à été pensé par un webdesigner du nom de Osvaldas Valutis, ce plugin JavaScript a pour but de vous laisser le moyen de donner du style à votre lecteur audio en utilisant tout de même la puissance du CSS.

Comment ça fonctionne ?

Le DOM a toujours été une caverne d’Ali Baba de la structuration des pages internet, et bien le DOM HTML5 est quant-à lui encore plus riche !

En effet, bon nombre de méthodes, de propriétés et d’événements rendent sa manipulation plus facile.

Chacune de ses propriétés est donc parcourue et interprétée en conséquence. La balise audio se retrouve entourée d’une toute autre structure isolant chaque élément du Player Audio au travers d’une multitude de balises DIV.

Caractéristiques

  1. Léger, le poids total du fichier JavaScript compressé est de 4 Ko.
  2. Responsive, le player peut être extensible sous réserve d’une bonne utilisation du CSS.
  3. Palpable, l’utilisation du player au travers d’un smartphone n’en sera que plus agréable.
  4. Adaptatif, pour les navigateurs n’interprétant pas l’élément audio, des players optimisés interviennent en back up selon le cas de figure.
  5. Natif, les attributs (src, autoplay, loop, preload) ainsi que les différents tags sont acceptés.
  6. Complet, le player intègre les boutons Play/Stop, contrôle de la progression de lecture, gestion progressive du volume, indication de préchargement, …
  7. Pas de flash, et c’est mieux ainsi !

Support du plugin

Ce player semble être pris en charge un peu partout selon son auteur :

Osvaldas Valutis dit :

J’ai testé le lecteur audio et il fonctionne très bien sur  Safari, Chrome, Firefox et Opera pour les versions Mac et Windows. Il fonctionne bien sur Internet Explorer 9, 10 et se dégrade gracieusement en mode mini lecteur sur les versions antérieures.

J’ai aussi eu de la chance avec iOS 6, Windows Phone 7 et Android 4.2 qui sont les navigateurs par défaut. Cependant, les versions antérieures Android ne supportent pas les balises “audio”, ni “embed”, dans ce cas le lecteur ne fonctionne pas.

Image des différents navigateurs web

Installation

Commencez par importer jQuery ainsi que audioplayer.js dans votre document HTML en n’oubliant pas d’indiquer le bon DocType pour que la balise audio soit reconnue.

Il est temps de créer votre balise audio en intégrant les différentes sources relatives aux différents formats audio (wav, mp3, ogg).

Rappel : L’utilisation de la balise audio nécessite plusieurs formats audio. En effet, même si le MP3 est omniprésent, il n’est pas un format ouvert et est soumis à des brevets que certaines firmes ne veulent pas payer. On se doit de convertir notre flux audio avec différents codecs pour que la lecture s’effectue correctement sur l’ensemble des environnements.

Maintenant, il faut appeler le plugin avec une fonction toute simple. Le sélecteur ‘audio’ cible l’élément audio du document.

Votre code source devrait donc ressembler à ceci :

Paramètres acceptés

Voici les paramètres par défaut que vous pouvez modifier à votre convenance :

Personnalisation du Player

Personnalisez simplement votre player avec du CSS en vous servant des différentes classes générées.

Pour rappel, voici à quoi ressemblera notre page une fois que le plugin aura effectué son traitement :

Pour une documentation plus complète, je vous conseille de consulter l’article officiel  qui est en Anglais.

Le player n’est nullement dépendant des requêtes médias CSS (medias queries) car il a été intelligemment pensé par son auteur :

Schéma présentant les différents layout et leur propriétés
Le conteneur principal (.audioplayer) est en position relative alors que ses enfants sont en absolute.
 

 

Conclusion

Vous l’aurez compris, mis à part le fait qu’il faille insérer un fichier JS supplémentaire puisqu’il s’agit d’un plugin, Audio Player ne procure quasiment que des avantages :

  • Il est très léger
  • Il est fonctionnel sur la quasi totalité des navigateurs
  • Très simple à installer
  • Personnalisable via CSS3 (donc possiblement sensible au responsive)

En somme, une véritable aubaine pour les webdesigners qui peuvent ainsi insérer un lecteur de flux audio qui s’intègre parfaitement bien avec leur charte graphique, puisque entièrement customisable.

Un Player Audio personnalisable en CSS, 4.5 out of 5 based on 2 ratings

Commentaires

#1
simbur

Bonjour

j’aurai une question, comment pourrais je faire pour qu’à la place de l’îcone “Play” et Pause une image de ma composition apparaisse?

Cordialement

#2
m8x

Bonjour,

seriez vous quels sont les modifications à effectué dans le fichier audioplayer.js au niveau de la fonction adjustVolume = function( e ) afin d’obtenir une barre de contrôle horizontale ?

D’avance merci

Ps : simbur, il te suffit d’appliquer une images en css sur les div :
audioplayer-playpause & audioplayer-volume

Réagissez à cet article

Données obligatoires