Hoje em dia é muito simples adicionar uma faixa de áudio no seu site ou blog feito no WordPress. No entanto eu particularmente acho muito pouco ajustável o layout todo preto padrão do player de áudio do WordPress. Nesse artigo vou mostrar como alterar as cores do player de áudio do WordPress de uma forma simples.

Esse aqui é o trecho de código que você precisa adicionar para "embbedar" um áudio no seu post ou página (aquela aspa simples antes do 'audio' é apenas para o WP não interpretar o shortcode):

O resultado é este "tocador de áudio" simples mas funcional, mas que agrega muito pouco no layout do site:

Utilizando CSS é possível customizar e deixar este player de áudio mais harmonizado e ajustado com as cores e paletas do seu site. Podemos usar das classes CSS para deixar as cores mais neutras, trazendo um toque de cinza para o player:

Com isso já temos uma aparência mais neutra e menos destacada, dá só uma olhada:

E aí o céu é o limite com esses recursos:

A única condição que é mais difícil de ser customizada é os botões de "PLAY" e o botão de "VOLUME". Isso porque o Javascript utiliza de dois arquivos SVG para renderizar essa seção do player de áudio.

Neste caso, ainda é possível substituir estes arquivos, mas em qualquer atualização do WordPress eles seria sobrescritos.

A solução seria hospedar esses arquivos em um diretório "fora do default" para não correr o risco de ser atualizado. Sendo assim, adicionamos mais alguns trechos em nosso CSS personalizado:

O resultado é este aqui:

Um pouquinho mais complexo, mas que, tendo necessidade, não exige muito trabalho para ser realizado.

Espero que aproveitem essa dica e sejam criativos na hora de montar um layout harmonizado e que siga as paletas de cores definidas pelo cliente ou as do seu próprio negócio.

Isso faz muito diferença! 😀

P.s: Os players de áudio estão sem faixas reais, então não adianta dar o play porque é apenas para efeito demonstrativo, ok? Quer ouvir música vai no Spotify 😛