É possível definir o estilo da tag de áudio html5?

120

Eu não encontrei nenhum recurso sobre como fazer isso. Seria bom ter algo tão simples como mudar a cor do player :)

rabidmachine9
fonte
3
Me faz pensar nos botões de ritmo em Wurlitzers antigos - "samba", "jazz", "valsa", ...
David Gelhar
1
Navegadores diferentes reagem de maneira diferente ao estilo do elemento de áudio - stackoverflow.com/a/27765938/325251
mvark
1
sim, e por exemplo, parece o pior. como eles podem fazer isso parecer tão ruim?
live-love
1
estilo de vídeo cross browser answer advprog.blogspot.co.uk/2013/07/…
Mousey
@ 40-Love: essa é uma questão séria? é a Microsoft !!
Ringo

Respostas:

47

Sim! A tag de áudio HTML5 com o atributo "controls" usa o player padrão do navegador. Você pode personalizá-lo ao seu gosto, não usando os controles do navegador, mas rodando seus próprios controles e conversando com a API de áudio via javascript.

Felizmente, outras pessoas já fizeram isso. Meu player favorito agora é o jPlayer , é muito estiloso e funciona muito bem. Confira.

Benny
fonte
49
Então a resposta é "não, não é possível, você deve usar um player externo"?
Fernando
2
@Fernando: é possível. Isso responde à pergunta "é possível?"
Dan Schnau
3
Obrigado @dsschnau. Eu postei meu comentário porque a questão é sobre como estilizar a tag de vídeo html5 e todas as respostas são mais ou menos como sim, é possível, usando outras tags .
Fernando
10
Então, isso é realmente um "não"? Rolar sua própria IU não é a mesma coisa que uma marcação existente.
bob
2
Esta resposta é apenas um link para um recurso. E se o jPlayer desaparecer ?
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

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

Fábio Zangirolami
fonte
18
Apresentação ruim, mas seletor CSS útil!
benoît
6
você pode mostrar um exemplo de como usá-los? apenas amostra de código?
Xsmael
9
Isso só é compatível com navegadores baseados em webkit (por exemplo, não Firefox, IE, etc.)
gilad mayani
2
Muito bom hacking, é a resposta correta e muito obrigado! eu mudo o estilo da tag de áudio sem dor e código JS adicional, ViVa Fabio
java acm
1
Parece ser copiado / colado de gist.github.com/afabbro/3759334
diachedélico de
64

Sim: você pode ocultar a IU embutida do navegador (removendo o controlsatributo audio) e, em vez disso, criar sua própria interface e controlar a reprodução usando Javascript ( fonte ):

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

Você pode definir o estilo dos elementos da maneira que desejar usando CSS.

Referência da API MDN HTMLAudioElement

Gilad Mayani
fonte
certamente isso (o .play) não funcionaria no IOS, pois está bloqueado (consulte stackoverflow.com/questions/31776548/… )
user1432181
30

A aparência da tag depende do navegador, mas você pode ocultá-la, construir sua própria interface e controlar a reprodução usando Javascript.

Mihai
fonte
14

algumas afinações de cores

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}
Arthur Veselov
fonte
1
esta é uma maneira rápida e suja de mudar as cores básicas do player, muito útil
wakandan
Limpei minhas credenciais de login para fazer login, votar positivamente e dizer "OBRIGADO".
Marc Amos
8

Ken também acertou.

uma csstag:

audio {

}

obterá alguns resultados. parece que não quer que o jogador tenha altura acima ou abaixo de 25px, mas a largura pode ser reduzida ou alongada até certo ponto.

isso foi bom o suficiente para mim; veja este exemplo (aviso, o áudio é reproduzido automaticamente): www.thenewyorkerdeliinc.com

usuario
fonte
Para mim, um grande problema é o Internet Explorer. Parece terrível, com cores diferentes e tamanho muito maior do que os outros jogadores do navegador, embora a largura seja definida como 150px
Ringo
Se você precisa colocar o IE9 + player em um espaço pequeno, uma altura de 25px e largura de 100px funcionou para mim. Acho que a altura de 25 px foi a chave, mas números maiores não funcionaram por qualquer motivo.
Ringo
O link está desativado, infelizmente
Alex Sorokoletov
6

Para alterar apenas a cor do player, basta endereçar a tag de áudio em seu arquivo css, por exemplo, em um dos meus sites o player ficou invisível (branco sobre branco), então eu adicionei:

audio {
    background-color: #95B9C7;
}

Isso mudou o player para azul claro.

Karin
fonte
12
Isso não muda a cor do meu player, apenas coloca uma cor de fundo atrás dele. Alguma ideia do porquê?
Tom
1
@Tom porque esta solução não é para alterar o fundo cinza padrão do player :-) Mesmo resultado que você para mim.
Florian Doyen
0

Sim é possível, @ Fábio Zangirolami resposta

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}
Hernán Eche
fonte
Não funciona no Firefox 77
Henry
-4

Se você deseja estilizar o reprodutor de música padrão do navegador no CSS:

audio {
    enter code here;
}
Kenneth Klippert
fonte
1
a descrição incompleta é muito simples e posso usar essa forma para
definir o
Mesmo uma verificação superficial dessa resposta revelaria que ela está errada.
Isaac Lubow