¿Es posible diseñar la etiqueta de audio html5?

No he encontrado ningún recurso sobre cómo hacer eso. Algo tan simple como cambiar el color del jugador sería bueno tener 🙂

¡Sí! La etiqueta de audio HTML5 con el atributo “controles” usa el reproductor predeterminado del navegador. Puede personalizarlo a su gusto si no usa los controles del navegador, sino que activa sus propios controles y habla con la API de audio a través de javascript.

Afortunadamente, otras personas ya han hecho esto. Mi jugador favorito en este momento es jPlayer , es muy fácil de usar y funciona muy bien. Echale un vistazo.

 

Sí: puede ocultar la IU del navegador incorporada (eliminando el atributo de controls del audio ) y en su lugar construir su propia interfaz y controlar la reproducción utilizando Javascript ( fuente ):

  

A continuación, puede agregar clases CSS a cada uno de los elementos (en este caso, los button div + s) y darles el estilo que desee.

Se pueden encontrar propiedades y métodos adicionales de la interfaz JavaScript de HTMLAudioElement aquí .

La apariencia de la etiqueta depende del navegador, pero puede ocultarla, crear su propia interfaz y controlar la reproducción mediante Javascript.

Para cambiar solo el color del reproductor, simplemente dirígete a la etiqueta de audio en tu archivo css, por ejemplo, en uno de mis sitios el reproductor se volvió invisible (blanco sobre blanco) así que agregué:

 audio { background-color: #95B9C7; } 

Esto cambió el jugador a azul claro.

Ken también tenía razón.

una etiqueta css :

 audio { } 

obtendrá algunos resultados. parece que no quiere que el jugador tenga una altura superior o inferior a 25px, pero el ancho puede acortarse o alargarse hasta cierto punto.

esto fue lo suficientemente bueno para mí; vea este ejemplo (advertencia, el audio se reproduce automáticamente): http://www.thenewyorkerdeliinc.com

Debes crear tu propio reproductor que interactúa con el elemento de audio HTML5. Este tutorial ayudará a http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Si desea estilo el reproductor de música estándar de los navegadores en el CSS:

 audio { enter code here; }