Personalize o player de áudio

6 min read

O player de áudio é o que seus visitantes veem e clicam. Você pode mudar as cores, a posição na página, o tamanho e quais controles ele exibe. Visualize as alterações em tempo real antes de salvar.

Abra a página de configurações do Player

Acesse Texto para Voz → Player. A página está organizada em cinco seções:

  1. Posicionamento
  2. Cores
  3. Estilo da barra de progresso
  4. Controles exibidos
  5. Visualização ao vivo

Cada alteração feita atualiza a visualização na parte inferior da página.

Posicionamento

Define onde o player aparece nos seus posts. Escolha uma opção:

  • Antes do título: acima do título do post
  • Após o título: entre o título e o primeiro parágrafo
  • Após o conteúdo: no final do post (padrão)
  • Antes do resumo: exibido apenas em páginas de arquivo ou listas de blog
  • Após o resumo: exibido depois dos resumos dos posts em arquivos
  • Rodapé fixo (PRO): fixo na parte inferior da página enquanto o visitante rola

Para a maioria dos blogs, Após o título ou Após o conteúdo funciona melhor. Veja Player de Rodapé Fixo para a opção de barra fixada.

Cores

Três seletores de cor controlam a aparência do player:

  • Fundo: a cor de superfície do player
  • Texto: cor do título e do display de tempo
  • Destaque / Play: o botão de play, o preenchimento da barra de progresso e os ícones ativos

Escolha cores que combinem com seu tema. A visualização atualiza em tempo real.

Dica: Se você usa variáveis CSS no seu tema, pode sobrescrever essas cores com CSS personalizado. Veja CSS Personalizado.

Estilo da barra de progresso

Duas opções:

  • Linear: uma barra de progresso horizontal padrão (padrão)
  • Forma de onda (PRO): uma forma de onda visual onde cada post recebe um padrão único

A forma de onda adiciona personalidade a cada post e fica ótima para conteúdo no estilo podcast. É baseada em SVG e não acrescenta peso significativo à página. Veja Barra de Progresso em Forma de Onda.

Controles exibidos

Cada controle é um simples botão de ligar/desligar. Ative os que deseja exibir e desative os que tornam a aparência mais limpa.

  • Play / pausa: sempre ativo (não pode ser desativado)
  • Tempo atual e duração
  • Velocidade de reprodução (0,5x, 1x, 1,25x, 1,5x, 2x)
  • Volume
  • Download
  • Loop
  • Ícone de informações (exibe o nome da voz e o idioma)

Para acessibilidade, recomendamos manter Display de tempo, Velocidade e Download ativados.

Visualização ao vivo

A parte inferior da página mostra exatamente o que seus visitantes verão. Um pequeno trecho de texto é reproduzido ao clicar. A visualização atualiza a cada alteração feita.

Clique em Salvar alterações na barra superior quando estiver satisfeito. As alterações se aplicam imediatamente a todos os posts com áudio.

Comportamento em dispositivos móveis

O player é responsivo e se adapta a telas menores:

  • Abaixo de 480px: os controles de Download e Informações se recolhem em um menu
  • Abaixo de 320px: os controles de Loop e Velocidade ficam ocultos, mantendo apenas Play e Tempo

Cache dinâmico de CSS

Suas escolhas de cores ficam em cache por 12 horas para evitar a regeneração do CSS a cada carregamento de página. Ao salvar as alterações, o cache é limpo automaticamente. Se você ver cores antigas, atualize a página forçadamente (Ctrl+Shift+R).

Páginas relacionadas