Sélectionner une page

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 1  Un player audio Responsive et Touch-Friendly (4,7 MiB, 565 hits)


 
Article original sur Codrops 

Florent Maillefaud

Un player audio Responsive et Touch-Friendly 2Webmaster à Sablons (Isère) / Création de sites internet WordPress.

Micro-entrepreneur depuis 2012, je vous propose la création ou la refonte de votre site internet sous WordPress et à votre image.

Que ce soit un site vitrine, un blog ou un site e-commerce pour votre entreprise ou association, laissez votre empreinte sur le web !

Share This