Blog da Amicatek

Como alterar as cores do player de áudio do WordPress

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 😛

Este artigo te ajudou? Faça uma avaliação usando as Estrelas
Fellipe Soares

Fellipe Soares

Bacharel em Sistemas da Informação, trabalha há mais de 10 anos com WordPress na criação de soluções para empresas e profissionais liberais.

Inscreva-se para receber novidades

Tenha em primeira mão conteúdos especiais sobre WordPress

Deixe um comentário

O seu endereço de e-mail não será publicado.

Saiba mais sobre

Receba mais notícias como essa sobre Tutoriais através da nossa Newsletter

Notícias sobre Segurança, Marketing, Performance e Negócios sempre relacionadas ao WordPress todas as segundas-feiras, para você começar bem a semana.