Lecteur Mp3 Modèles CSS

Modèles CSS de lecteur MP3 entièrement configurables

Avec les modèles CSS de lecteur MP3, l'enregistrement reste inchangé tandis que le lecteur adopte les couleurs, les dimensions et les espacements de votre site. Nicepage rassemble la plupart de ces paramètres dans les propriétés de l'élément audio et le panneau de style du lecteur, avec vos propres règles pour ce qu'ils ne couvrent pas.

Styliser le bouton de lecture et la barre de progression

Les styles d'un lecteur se divisent en plusieurs zones distinctes :

• Le conteneur, où le fond, la bordure et l'ombre séparent le lecteur du contenu adjacent.
• Le bouton de lecture, dont la couleur et la taille doivent ressortir sur la pochette.
• La barre de progression, avec des parties remplies et non remplies dans différentes nuances.
• Le texte du titre et de l'artiste, dimensionné de sorte qu'un nom long n'empiète pas sur le bouton.

Lorsqu'un préréglage nécessite un style plus précis, le guide sur le Custom CSS explique comment attribuer une classe d'élément et ajouter du CSS au niveau de l'élément, de la page ou du site. Une règle d'élément convient à un lecteur particulier, tandis qu'une règle de site assure l'uniformité de l'ensemble. Comme Nicepage n'exécute pas le CSS personnalisé directement dans l'éditeur, vérifiez le résultat dans l'aperçu de la page. La barre n'affiche aucun remplissage tant qu'une piste n'a pas démarré ; un remplissage qui se fond dans l'arrière-plan peut donc passer inaperçu.

Comparaison de quatre variantes courantes

Un lecteur compact regroupe le bouton, le titre et la barre sur une seule ligne étroite. Laisser le titre revenir à la ligne est préférable à la réduction uniforme des trois éléments, car le bouton devient difficile à toucher bien avant que le texte ne devienne trop petit. Sur un lecteur sombre, les couleurs fonctionnent comme un ensemble : un remplissage gris clair convenable sur fond blanc peut disparaître sur un fond anthracite. Les designs minimalistes suppriment les bordures et les ombres, ce qui fonctionne tant que le bouton reste bien visible. Les lecteurs axés sur le visuel mettent la pochette en avant ; sur un téléphone, une grande image peut comprimer les commandes en une mince bande. CSS Grid ou Flexbox peuvent déplacer la pochette sur sa propre ligne dès que l'écran se rétrécit. Des tailles fixes en pixels conviennent pour un bouton ou une miniature, mais une largeur fixe pour l'ensemble du lecteur pose généralement problème sur les petits écrans.

Limites des commandes natives du navigateur

Les commandes audio natives du navigateur varient selon les navigateurs et n'obéissent qu'à peu de règles de style ; un curseur de forme personnalisée nécessite donc une interface conçue spécifiquement pour lui. Un bouton de lecture restylé confie toujours la lecture et la pause au lecteur, et une barre recolorée n'ajoute pas de navigation dans le morceau. Les styles de focus et de survol n'aident que si la commande expose ces états, et aucun style ne peut ajouter une prise en charge du clavier absente. Lorsqu'une règle personnalisée entre en conflit avec les styles de Nicepage, retirez-la temporairement pour vérifier si elle en est la cause. Si le panneau et quelques règles permettent d'obtenir le rendu souhaité dans l'aperçu, le modèle a rempli son rôle.