98 votes

Est-il possible de styler une balise audio html5?

Je n'ai trouvé aucune ressource sur la façon de le faire ... même changer la couleur du lecteur serait bien :)

46voto

Benny Points 685

Oui! La balise audio HTML5 avec l'attribut "controls" utilise le lecteur par défaut du navigateur. Mais vous pouvez complètement le personnaliser à votre guise en n'utilisant pas les contrôles du navigateur, mais en lançant vos propres contrôles et en dialoguant avec l'API audio via javascript.

Heureusement, d'autres personnes l'ont déjà fait. Mon joueur préféré actuellement est [jPlayer] http://www.jplayer.org/ ), il est très stylable et fonctionne très bien. Vérifiez-le.

26voto

Mihai Points 1140

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

8voto

Nick Points 31

Ken avait aussi raison.

une balise css :

 audio {

}
 

vous obtiendrez des résultats. semble que cela ne veut pas du joueur une hauteur au dessus ou en dessous de 25px mais la largeur peut être raccourcie ou allongée dans une certaine mesure.

c'était assez bien pour moi; voir cet exemple (avertissement, la lecture audio est automatique): www.thenewyorkerdeliinc.com

8voto

katzkode Points 136

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

7voto

Karin Points 77

Pour changer uniquement la couleur du lecteur, il vous suffit d'adresser la balise audio dans votre fichier css. Par exemple, sur l'un de mes sites, le lecteur est devenu invisible (blanc sur blanc). J'ai donc ajouté:

 audio {
    background-color: #95B9C7;
}
 

Cela a changé le lecteur en bleu clair.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: