Un player audio Responsive et Touch-Friendly

Voici un plugin jQuery lecteur audio qui est Responsive et Touch-friendly. L’interface utilisateur est en CSS uniquement, pas d’images utilisées.

Il s’agit d’un lecteur très léger (4kb) avec un objectif très clair : lire un fichier audio unique.

Comment ça marche

Le plugin remplace les éléments <audio> avec certains évènements HTML et JavaScript qui s’y rattachent.

Responsive

Smartphone, tablette ou X pouces de largeur : ce lecteur audio se sent bien avec n’importe quelle taille de l’écran. Sans avoir besoin de requêtes médias, une simple mise en page fluide a été adoptée.

Touch-Friendly

Il est réel, vivant et vous pouvez le toucher. Ce lecteur audio peut être utilisé sur les écrans tactiles. Tout ce que vous pouvez faire avec votre souris, vous pouvez aussi le faire avec votre doigt. Chaque action a ses évènements tactiles définis et activés.

L’adaptabilité

– JavaScript désactivé ? Pas de soucis, le lecteur audio de votre navigateur par défaut fera le travail.
– Le bouton de volume se cache si la commande de volume n’est pas disponible.
– Lorsque le navigateur ne supporte pas tout à fait l’élément <audio> ou l’un des fichiers audios fournis, le lecteur audio se métamorphose gracieusement en un seul bouton (Lecture / Pause) avec l’élément <embed />, qui sera basée sur l’utilisation d’un plugin tiers (la plupart du temps de Quick Time sur Mac, Windows Media Player sous Windows), pour lire le fichier audio.

Voici une démo ici !

Télécharger les sources : 

  Un player audio Responsive et Touch-Friendly (4,7 MiB, 193 téléchargements)

 

Article original sur Codrops 

0 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *