Chargement…
Créer Un Lecteur Audio En HTML5

Créer Un Lecteur Audio En HTML5



HTML5 a simplifié considérablement le travail des Web développeurs. Dans ce tutoriel, on va vous montrer comment créer un Lecteur audio en HTML5 avec un des meilleurs Plugins UI: MediaElement.js. Ce plugin fait même partie de la dernière version de WordPress, il permet d’insérer n’importe quel élément vidéo ou audio en utilisant un Lecteur inter-active en HTML5 ou Flash en cas de besoin.

Un Lecteur Audio En HTML5

Un Lecteur Audio En HTML5

Dans le Code Source de ce Lecteur, on a ajouté les fichiers Flash et Javascripts dont vous aurez besoin, mais si vous voulez ajouter encore plus d’animations et d’éléments dans votre Lecteur, on vous invite à voir la documentation complète de MediaElement.js.

Comment Tous Cela Marche

En fait, le plugin effectue tous le travail, il faut juste insérer notre fichier audio avec un code HTML comme cela :

Pour notre exemple on utilise une Chanson libre a partager : Stay Down de Fire to The Stars

Vous pouvez personnaliser le Lecteur à vos besoin en utilisant des Icônes gratuites comme cette collection d’icônes.

On a utilisé ces paramètres pour le Mediaelement.js :

Mais vous pouvez ajouter d’autres effets à votre lecteur : Paramètres API

Pour contrôler les couleurs de Lecteur, la Barre de Progressions..etc Rendez-vous à la Feuille de Style /css/style.css.

Démonstration Télécharger Code Source

A vous maintenant de jouer et si vous avez des questions n’hésitez pas a nous laisser un commentaire!



Laisser un commentaire