É possível estilizar a tag de áudio html5?

Eu não encontrei nenhum recurso sobre como fazer isso. Algo tão simples como mudar a cor do jogador seria bom ter 🙂

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

 

Sim: você pode ocultar a interface do usuário do navegador interno (removendo o atributo controls do audio ) e, em vez disso, criar sua própria interface e controlar a reprodução usando o Javascript ( origem ):

  

Você pode então adicionar classs CSS a cada um dos elementos (neste caso, os button div + s) e estilizá-los como desejar.

Propriedades e methods adicionais da interface JavaScript do HTMLAudioElement podem ser encontrados aqui .

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

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

 audio { background-color: #95B9C7; } 

Isso mudou o jogador para azul claro.

Ken também estava certo.

uma tag css :

 audio { } 

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

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

Você precisa criar seu próprio player que interaja com o elemento de áudio HTML5. Este tutorial ajudará http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Se você quiser estilizar o player de música padrão dos navegadores no CSS:

 audio { enter code here; }