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

No he encontrado ningún recurso sobre cómo hacer eso. Sería bueno tener algo tan simple como cambiar el color del reproductor :)

¡Si! La etiqueta de audio HTML5 con el atributo "controles" utiliza el reproductor predeterminado del navegador. Puede personalizarlo a su gusto sin usar los controles del navegador, sino moviendo sus propios controles y hablando con la API de audio a través de javascript.

Afortunadamente, otras personas ya lo han hecho. Mi reproductor favorito en este momento es jPlayer , es muy estilizable y funciona muy bien. Echale un vistazo.

<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

REFERENCIA: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

Sí: puede ocultar la interfaz de usuario del navegador incorporada (eliminando el controlsatributo de audio) y, en su lugar, crear su propia interfaz y controlar la reproducción usando Javascript ( fuente ):

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

A continuación, puede diseñar los elementos como desee utilizando CSS.

Referencia de la API de MDN HTMLAudioElement

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

algunas afinaciones de color

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

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

Ken también tenía razón.

una cssetiqueta:

audio {

}

te dará algunos resultados. Parece que no quiere que el reproductor tenga una altura superior o inferior a 25 px, pero el ancho se puede acortar o alargar hasta cierto punto.

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

Para cambiar solo el color del reproductor, simplemente dirija la etiqueta de audio en su 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 reproductor a azul claro.

Sí, es posible, de @ Fábio Zangirolami responder

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

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

audio {
    enter code here;
}