HTML5 a simplifié de nombreuses choses dans le développement Web, notamment l’utilisation de l’audio intégré. Aujourd'hui, nous allons travailler sur le processus de personnalisation complète de l'élément de lecteur audio HTML5, qui peut s'adapter aux replis des anciens navigateurs. C'est une méthode simple, facile à utiliser et à modifier.
Le projet open source MediaElement.js est très populaire et a même été intégré au cœur de WordPress depuis la version 3.6. Il vous permet d'intégrer n'importe quel fichier audio ou vidéo au format HTML5 à l'aide d'une interface de lecteur native pouvant s'adapter de manière dynamique à un lecteur Flash / Silverlight en cas de besoin. J'ai été vraiment impressionné de voir toutes les fonctionnalités et cela semble être l'une des solutions les plus avancées pour gérer les navigateurs traditionnels. Nous allons utiliser cela comme point de départ!
Live Demo - Télécharger le code source
Commencer
Tout de suite, j'ai remarqué que MediaElement était construit sur jQuery. La dernière bibliothèque en date au moment de l'écriture de ce code est la 1.10.2 et la prise en charge de divers éléments de l'interface utilisateur pourrait changer dans les futures mises à jour. Autre que ce script, nous avons également besoin d'une copie de mediaelement-and-player.min.js que vous pouvez récupérer sur le site officiel ou dans le dépôt GitHub. Les deux autres fichiers à copier dans le même répertoire sont: flashmediaelement.swf et silverlightmediaelement.xap.
Maintenant, le script fonctionne en remplaçant votre moyenne balise avec du HTML interne construit en utilisant des noms de classe. Le remplacement de ces classes devrait fournir beaucoup de place pour une personnalisation détaillée. J'utilise un morceau assez long appelé Evidence Song, publié sous l'attribution CC + le même partage.
L'idée de conception originale est venue de ce tutoriel sur DesignModo qui utilise également les illustrations d'album et simplifie les pistes volume / temps. Mon objectif est d’ajuster grandement cette situation dans une version simplifiée axée sur la convivialité. J'ai mis à jour de nombreux graphiques en utilisant des éléments de PixelsDaily comme ces curseurs métalliques. Les boutons play / pause et mute / unmute proviennent également de ce lecteur audio PSD.
Avoir des graphismes ou des PSD de freebie organisés à l'avance vous épargnera beaucoup de problèmes en essayant de construire le lecteur en CSS. Mais avant de passer au code CSS, je souhaite expliquer comment nous initialisons le script.
Implémentation de MediaElement.js
La méthode d'initialisation s'appelle mediaelementplayer () qui peut prendre un certain nombre d'options différentes. Consultez la documentation de la page Web pour en savoir plus sur son fonctionnement.
La liste des fonctionnalités est créée un peu comme un tableau de valeurs. jouer pause est un bouton de lecture et de pause unique, tandis que le progrès et le volume représentent les pistes de nettoyage pour chaque propriété. Je peux également définir la largeur / hauteur de l'élément audio tel qu'il devrait être rendu avec jQuery.
Les trois derniers paramètres forceront un affichage natif sur les plates-formes mobiles utilisant iOS ou Android. Parfois, vous pouvez obtenir une interface utilisateur audio simple pour fonctionner sur mobile, mais dans ce cas, il est beaucoup plus facile de prendre en charge le lecteur natif. Le problème le plus important est la gestion d’une mise en page adaptée aux mobiles qui convient également à une interface audio utilisable.
Styles de lecteur audio
Maintenant, nous pouvons sauter dans CSS et voir comment le design est créé. La configuration du code de base repose sur le positionnement relatif ou absolu de chaque élément principal. Nous pouvons définir des valeurs fixes largeur / hauteur pour que tout soit identique dans tous les navigateurs. .audio-player sera la classe de conteneur que nous pouvons toujours utiliser comme base.
Le conteneur de lecteur audio de grande taille peut être conçu de n’importe quelle manière en utilisant des textures répétitives, des dégradés d’arrière-plan, voire des ombres de type CSS3. J'ai également créé un exemple d'élément h2 contenant le nom du groupe et le titre de la chanson. En utilisant jQuery, nous pourrions même mettre à jour cette valeur de texte en nous basant sur une liste de lecture de musique pré-générée.
Vous remarquerez assez rapidement que chaque entrée a une classe de définition très simple à manipuler. Le bouton Lecture / Pause est créé à l’aide d’un seul fichier PNG et les mises à jour de l’image d’arrière-plan en fonction du bouton à afficher. Ceux-ci peuvent être ciblés en utilisant bouton .mejs-play et bouton .mejs-pause, respectivement.
L'icône audio muet / non muet est également très similaire et utilise un autre sprite PNG.La plus grande perte de temps surviendra lorsque vous devrez étudier chacune de ces classes et apprendre à écrire des sélecteurs CSS spécifiques pour elles. MediaElement est particulièrement doué pour la mise à jour de l'interface afin d'inclure de nombreuses classes associées pour presque chaque interaction utilisateur.
Barres de lavage
Il existe deux filtres uniques relatifs au volume audio et à la recherche de temps sur la piste. Je me suis limité aux dégradés ou aux couleurs d'arrière-plan plates, mais vous pouvez utiliser une image d'arrière-plan répétée pour voir à quoi elle ressemble.
Pour chaque barre de lavage, vous constaterez qu'il existe différentes parties qui doivent être désignées séparément. Chaque barre aura une classe de vue complète qui représente la valeur à 100%. Pour le volume c'est étiqueté .mejs-horizontal-volume-total et il est censé se fondre parfaitement dans la mise en page. De même .mejs-horizontal-volume-current représente la barre qui affiche le niveau de volume actuel. Donc, s'il est défini sur 50%, seule la moitié de la barre totale sera remplie à l'aide de ces propriétés CSS. J'aime l'aspect du bord arrondi de la bordure de chaque piste de nettoyage et c'est tellement plus facile avec les propriétés CSS3.
Le rail de chargement a une caractéristique supplémentaire avec la classe .mejs-time-chargé. Cela représente la quantité de fichiers audio pré-chargés via des téléchargements en continu. Cet effet est plus communément observé dans les lecteurs vidéo, comme avec YouTube. Mais les pistes audio peuvent toujours avoir le même effet - ces fichiers sont simplement plus petits et prennent moins de temps pour terminer le téléchargement.
Je dois noter que l’utilisation de toute version de jQuery 1.8+ ne rend pas toujours la largeur totale de la barre de défilement. Pour une raison quelconque, il n’augmente jamais à moins d’inclure des classes parent plus spécifiques ou d’utiliser le code suivant. !important mot-clé. Des bogues similaires pourraient apparaître dans les prochaines versions, alors assurez-vous de tout vérifier.
Fonctions supplémentaires de l'interface utilisateur
Les deux dernières sections CSS se concentrent sur les curseurs métalliques et l'info-bulle temporelle. J'ai trouvé cet effet très inspirant sur le lecteur DesignModo et je voulais le garder comme un spectacle de ce qui est possible dans l'interface utilisateur.
Cela ne vaut pas la peine d’expliquer ici, si ce n’est les images de fond parfaitement ajustées au positionnement absolu. Il est judicieux de tout aligner, à moins que votre objectif ne soit de créer un lecteur audio à largeur fluide et réactif. Les choses deviennent définitivement un peu plus compliquées, mais il devrait être évident que tout est possible avec suffisamment de travail.
En suivant l’exemple plus ancien, j’ai gardé cet effet de survol d’info-bulle en utilisant une seule image d’arrière-plan. CSS3 peut générer des info-bulles et des flèches arrondies uniques, mais cela nécessite souvent plus de HTML que nous ne pouvons en modifier manuellement dans le lecteur audio. Ce texte est tenu dans une classe .mejs-time-float qui utilise affichage: aucun par défaut. Nous souhaitons uniquement afficher la valeur temporelle lors du survol de la barre de récurage, afin d'aider les utilisateurs à décider du temps nécessaire pour les ignorer.
Globalement, ce plugin nécessite beaucoup de code pour que tout soit beau. Cela peut très bien vous prendre plus d’une journée pour obtenir un produit fini. Cependant, je dirais également que MediaElement.js est la solution la plus précise pour les lecteurs audio / vidéo HTML5 modernes. Si vous avez un beau modèle de maquette, vous pouvez certainement le créer avec suffisamment de temps et de patience.
Live Demo - Télécharger le code source
Fermeture
J'espère que ce tutoriel pourra nous éclairer sur le processus de personnalisation d'un lecteur audio HTML5. L'utilisation de styles CSS3 courants sans JS est une possibilité, mais elle est très mal prise en charge par les anciennes versions d'IE et les navigateurs obsolètes similaires. Bien que JavaScript ne soit pas toujours pris en charge par tous les navigateurs, MediaElement.js fournit un simple repli sur l’interface du lecteur HTML5 classique.
N'hésitez pas à télécharger une copie du code source de mon projet et à voir le type de conceptions d'interface utilisateur que vous pouvez créer!