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):
['audio mp3="arquivo.mp3"][/audio]
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:
/* altero a cor do background */
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
background: url('') !important;
background-color: #C9C9C9 !important;
}
/* altero a cor da fonte */
.mejs-currenttime,
.mejs-duration {
color: black !important;
}
/* elimina a borda que aparece quando é clicado */
.mejs-controls .mejs-button button:focus {
outline: none !important;
}
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:
/* uso um arquivo SVG com tonalidade mais escura */
.mejs-controls .mejs-button button {
background-image: url('teste/mejs-controls-dark.svg') !important;
}
/* altero a cor da barra de progresso */
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #AAC7E3 !important;
}
/* altero a cor da barra de tempo corrente */
.mejs-controls .mejs-time-rail .mejs-time-current {
background: #00a !important;
}
/* altero a cor da barra de carregamento do arquivo */
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #ccc !important;
}
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 😛
