web-dev-qa-db-fra.com

CSS personnalisé pour la balise <audio>?

Je suis en train de créer une application Web de lecteur de musique qui implémente la balise audio HTML5, mais j'aimerais qu'elle soit cohérente dans tous les navigateurs - est-il possible de définir mon propre CSS personnalisé? Et comment?

à votre santé

Fela

cssaudiohtml5html5-audio
22
Fela Maslen

Il n'existe actuellement aucun moyen de styliser HTML5 <audio> joueurs utilisant CSS. Au lieu de cela, vous pouvez laisser l'attribut control et implémenter vos propres contrôles à l'aide de Javascript. Si vous ne souhaitez pas tous les implémenter par vous-même, je vous recommande d'utiliser un lecteur audio HTML5 à thème existant, tel que jPlayer .

27
Brian Campbell

J'ai découvert tout à fait par accident (je travaillais avec des images à l'époque) que l'ombre de boîte, le rayon de bordure et les transitions fonctionnent assez bien avec le lecteur de balises audio standard. J'ai ce travail dans Chrome, FF et Opera.

audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

avec:-

audio
{
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-moz-box-shadow: 2px 2px 4px 0px #006773;
-webkit-box-shadow:  2px 2px 4px 0px #006773;
box-shadow: 2px 2px 4px 0px #006773;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
}

Je vous l'accorde seulement "tartine un peu", mais cela les rend plus excitants que ce qui existe déjà, et sans faire de recherches majeures dans JS.

NON disponible dans IE, malheureusement (ne prenant pas encore en charge le bit de transition), mais il semble bien se dégrader.

18
Spike

Outre les options d'ombre de boîte, de transformation et de bordure mentionnées dans d'autres réponses, les navigateurs WebKit obéissent actuellement à -webkit-text-fill-color pour définir la couleur des nombres "temps écoulé", mais puisqu'il n'y a aucun moyen de définir leur arrière-plan (qui peut varier selon la plate-forme, par exemple, les modes de contraste élevé inversés sur certains systèmes d'exploitation), il est conseillé de définir -webkit-text-fill-color sur la valeur "initial" si vous l'avez utilisé ailleurs et l'élément audio hérite de cela, sinon certains utilisateurs pourraient trouver ces chiffres illisibles.

1
Silas S. Brown

Il existe des options CSS pour la balise audio.

Comme: largeur de balise audio html 5

Mais si vous jouez avec, vous verrez que les résultats peuvent être inattendus - en août 2012.

0
geektard