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

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

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.

<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

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

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.

algumas afinações de cores

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

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

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

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.

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

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

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

audio {
    enter code here;
}