audio_player_wordpress
Fellipe Soares

Fellipe Soares

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 😛

COMPARTILHE

Compartilhar no facebook
Compartilhar no google
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no print
Compartilhar no email