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

120

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

rabidmachine9
fuente
3
Me hace pensar en los botones de ritmo de los viejos Wurlitzer: "samba", "jazz", "vals", ...
David Gelhar
1
Los diferentes navegadores reaccionan de manera diferente al estilo del elemento de audio - stackoverflow.com/a/27765938/325251
mvark
1
sí, y es decir, se ve peor. ¿Cómo pueden hacer que se vea tan mal?
amor vivo
1
estilo de video respuesta de navegador cruzado advprog.blogspot.co.uk/2013/07/…
Mousey
@ 40-Love: ¿es una pregunta seria? es Microsoft !!
Ringo

Respuestas:

47

¡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.

Benny
fuente
49
¿Entonces la respuesta es "no, no es posible, debes usar un reproductor externo"?
Fernando
2
@Fernando: sí es posible. Esto responde a la pregunta "¿es posible?"
Dan Schnau
3
Gracias @dsschnau. Publiqué mi comentario porque la pregunta es sobre el estilo de la etiqueta de video html5 , y todas las respuestas son más o menos como sí, es posible, usando otras etiquetas .
Fernando
10
Entonces, ¿eso es realmente un "no"? Desarrollar su propia interfaz de usuario no es lo mismo que un marcado existente.
bob
2
Esta respuesta es realmente solo un enlace a un recurso. ¿Qué pasa si jPlayer desaparece ?
Kyle
74
<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

Fábio Zangirolami
fuente
18
¡Mala presentación pero útil selector de CSS!
benoît
6
¿Puede mostrar un ejemplo de cómo utilizarlos? solo código de muestra?
Xsmael
9
Esto solo es compatible con navegadores basados ​​en webkit (por ejemplo, no Firefox, IE, etc.)
gilad mayani
2
Muy buen hackeo, es la respuesta correcta y muchas gracias! cambio el estilo de la etiqueta de audio sin dolor y código JS adicional, ViVa Fabio
java acm
1
Parece ser copiado / pegado de gist.github.com/afabbro/3759334
diachedelic
64

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

gilad mayani
fuente
seguramente esto (el .play) no funcionaría en IOS ya que está bloqueado (consulte stackoverflow.com/questions/31776548/… )
user1432181
30

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

Mihai
fuente
14

algunas afinaciones de color

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}
Arthur Veselov
fuente
1
esta es una manera rápida y sucia de cambiar los colores básicos del jugador, muy útil
wakandan
Desempolvé mis credenciales de inicio de sesión para iniciar sesión, votar a favor y decir "GRACIAS".
Marc Amos
8

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

Mella
fuente
Para mí, un gran problema es Internet Explorer. Se ve terrible, con un color diferente y un tamaño mucho más grande que los otros jugadores del navegador, aunque el ancho está configurado en 150px
Ringo
Si necesita colocar el reproductor IE9 + en un espacio pequeño, me funcionó una altura de 25 px y un ancho de 100 px. Creo que la altura de 25px fue clave, pero los números más grandes no funcionaron por alguna razón.
Ringo
Desafortunadamente, el enlace no funciona
Alex Sorokoletov
6

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.

Karin
fuente
12
Esto no cambia el color de mi reproductor, solo pone un color de fondo detrás. ¿Alguna idea de por qué?
Tom
1
@Tom porque esta solución no es para cambiar el fondo gris predeterminado del reproductor :-) El mismo resultado que tú para mí.
Florian Doyen
0

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

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}
Hernán Eche
fuente
No funciona en Firefox 77
Henry
-4

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

audio {
    enter code here;
}
Kenneth Klippert
fuente
1
La descripción no completa es muy simple y puedo usar esta manera para diseñar todos los elementos de audio
Davod Aslanifakor
Incluso una revisión superficial de esta respuesta habría revelado que está mal.
Isaac Lubow