Aquí hay un estilo personalizado para la etiqueta de audio . Puede usar audio::-webkit-media-controls-play-button para modificar el botón de reproducción en sí, y puede usar audio::-webkit-media-controls-timeline para la línea de tiempo de la siguiente manera:

 audio::-webkit-media-controls-play-button { transform: scale(2, 2); } audio::-webkit-media-controls-timeline { height: 20px; transform: scale(1, 1.5); }

 <h1>The audio element</h1> <audio controls controlsList="nodownload noplaybackrate" style="width:600px;"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

Si desea agrandar todo el reproductor de audio, puede hacerlo simplemente haciendo lo siguiente:

 audio { position: relative; right: -600px; transform: scale(3, 3); }

 <audio controls controlsList="nodownload noplaybackrate" style="width:600px;"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

Con los controles del kit web, también puede hacer que cada elemento sea más grande si desea que todo el reproductor sea más grande. Todas las modificaciones de audio de webkit permitidas se pueden encontrar a continuación.

 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

Espero que esto haya ayudado.

Como han escrito otros, el navegador crea el reproductor que se carga cuando se usa el elemento HTML <audio> , por lo tanto, se ve diferente en cada navegador y está extremadamente limitado en cuanto a la posibilidad de afectar su diseño a través de CSS.

Si desea crear un reproductor de audio realmente individual, hay un complemento jQuery llamado "jPlayer" que se puede encontrar aquí: https://jplayer.org/

Necesita algunas capacidades de ajuste para aplicarlo, pero realmente le permite usar sus propios gráficos y CSS para todos los elementos del reproductor. Parece viejo a primera vista (bueno: es viejo), pero ha estado funcionando (y aún lo está) en dos de mis sitios web sin necesidad de actualizarlo/cambiarlo en más de diez años...

Los navegadores proporcionan diferentes reproductores de audio predeterminados . No puede simplemente cambiar todas las propiedades usando CSS básico.

Desde https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#styling_with_css :

Puede diseñar los controles predeterminados con propiedades que afectan al bloque como una sola unidad, por ejemplo, puede darle un borde y radio de borde, relleno, margen, etc. Sin embargo, no puede diseñar los componentes individuales dentro del reproductor de audio. (por ejemplo, cambiar el tamaño de los botones o los iconos, cambiar la fuente, etc.), y los controles son diferentes en los distintos navegadores.

Para obtener una apariencia uniforme en todos los navegadores, deberá crear controles personalizados; estos se pueden marcar y diseñar de la manera que desee , y luego se puede usar JavaScript junto con la API HTMLMediaElement para conectar su funcionalidad.

Hay algunos ejemplos en la web de cómo puede diseñar reproductores de audio usando controles personalizados, por ejemplo, en Codepen.io y cómo usar la API para cambiar el estado.

Desde https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs :

Como parte de la especificación de HTML5, la API de HTMLMediaElement proporciona funciones que le permiten controlar los reproductores de video y audio mediante programación; por ejemplo, HTMLMediaElement.play(), HTMLMediaElement.pause(), etc. Esta interfaz está disponible tanto para los elementos como para las funciones. querrá implementar son casi idénticos. Veamos un ejemplo, agregando funciones a medida que avanzamos.

Desafortunadamente, no es super trivial crear el HTML, diseñarlo y usar javascript para controlar el audio usando la API.

 One of many custom audio player examples on Codepen: https://codepen.io/ozzie/pen/YPOBEJ