Est-il possible de styler une balise audio HTML5?

Je n’ai trouvé aucune ressource sur la façon de le faire. Quelque chose d’aussi simple que de changer la couleur du lecteur serait bien d’avoir 🙂

Oui! La balise audio HTML5 avec l’atsortingbut “controls” utilise le lecteur par défaut du navigateur. Vous pouvez le personnaliser à votre convenance en n’utilisant pas les contrôles du navigateur, mais en déplaçant vos propres commandes et en communiquant avec l’API audio via JavaScript.

Heureusement, d’autres personnes l’ont déjà fait. Mon lecteur préféré en ce moment est jPlayer , il est très stylisé et fonctionne très bien. Vérifiez-le.

 

Oui: vous pouvez masquer l’interface utilisateur du navigateur intégré (en supprimant l’atsortingbut de controls de l’ audio ) et créer votre propre interface et contrôler la lecture en utilisant Javascript ( source ):

  

Vous pouvez ensuite append des classes CSS à chacun des éléments (dans ce cas, les button div +) et les styliser comme vous le souhaitez.

Des propriétés et méthodes supplémentaires de l’interface HTML de HTMLAudioElement peuvent être trouvées ici .

L’apparence de la balise dépend du navigateur, mais vous pouvez la masquer, créer votre propre interface et contrôler la lecture avec Javascript.

Pour changer uniquement la couleur du lecteur, adressez simplement l’étiquette audio de votre fichier css, par exemple sur l’un de mes sites, le lecteur est devenu invisible (blanc sur blanc) et j’ai ajouté:

 audio { background-color: #95B9C7; } 

Cela a changé le lecteur en bleu clair.

Ken avait aussi raison.

une balise css :

 audio { } 

vous obtiendrez des résultats. Il semble que le joueur ne souhaite pas avoir une hauteur supérieure ou inférieure à 25px, mais la largeur peut être raccourcie ou allongée dans une certaine mesure.

c’était assez bon pour moi; voir cet exemple (avertissement, lecture audio automatique): http://www.thenewyorkerdeliinc.com

Vous devez créer votre propre lecteur qui s’interface avec l’élément audio HTML5. Ce tutoriel aidera http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Si vous voulez styliser le lecteur de musique standard des navigateurs dans le CSS:

 audio { enter code here; }