CSS personalizado para la etiqueta <audio>?

Question

Estoy construyendo una aplicación web de reproductor de música que implementa la etiqueta de audio HTML5; sin embargo, me gustaría que fuera coherente en todos los navegadores: ¿es posible definir mi propio CSS personalizado? ¿Y cómo?

aplausos

Fela

Answer 1

No hay actualmente ninguna manera con el estilo de HTML5 <audio> jugadores el uso de CSS. En su lugar, puede dejar el atributo control e implementar sus propios controles utilizando Javascript. Si no quiere implementarlos por su cuenta, le recomiendo usar un reproductor de audio HTML5 con temas, como jPlayer.

Answer 2

Hay opciones de CSS para la etiqueta de audio.

igual: html 5 audio tag width

Pero si juegas un rato con él verás los resultados pueden ser inesperados - a partir de agosto de 2012.

Answer 3

descubrí por accidente (que estaba trabajando con imágenes en el momento) que la sombra de caja, el radio de borde y las transiciones funcionan bastante bien con el reproductor de etiquetas de audio estándar de pantano. Tengo esto trabajando en Chrome, FF y 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); 
} 

con: -

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 ; 
} 

Te sólo "tartas, en un poco de" Grant, pero los convierte en un espectáculo más emocionante que lo que ya está allí, y sin hacer MAYOR fannying acerca de JS.

NO disponible en IE, desafortunadamente (aún no es compatible con el bit de transición), pero parece degradarse muy bien.

Answer 4

Además de las opciones box-shadow, transform y border mencionadas en otras respuestas, los navegadores WebKit actualmente también obedecen -webkit-text-fill-color para establecer el color de los números de "tiempo transcurrido", pero dado que no hay forma de hacerlo para establecer su fondo (que puede variar según la plataforma, por ejemplo, modos de alto contraste invertidos en algunos sistemas operativos), se recomienda configurar -webkit-text-fill-colour al valor "initial" si lo ha usado en otro lugar y el elemento de audio está heredando esto, de lo contrario, algunos usuarios pueden encontrar esos números ilegibles.