Barra de Progresso com Forma de Onda

2 min read

Uma forma de onda visual substitui a barra de progresso linear padrão. Cada post recebe um padrão exclusivo, deixando cada player com uma aparência distinta. Planos Pro e Agency.

Como ativar

  1. Acesse Texto para Voz → Player.
  2. Em Estilo da barra de progresso, selecione Forma de onda.
  3. Salve.

Todos os players de áudio do seu site passarão a usar a forma de onda.

Por que cada post tem um padrão exclusivo

A forma de onda é gerada a partir de uma semente derivada do ID do post. Isso significa:

  • Cada post tem uma forma de onda visualmente diferente
  • O mesmo post sempre exibe a mesma forma de onda
  • A forma de onda não representa o áudio real (é um padrão visual determinístico)

O resultado é muito melhor do que uma barra estática, sem adicionar nenhum peso ao arquivo. A forma de onda é um SVG inline com 60 barras.

Clique e arraste para navegar

A forma de onda é interativa:

  • Clique em qualquer ponto para pular para aquela posição
  • Clique e arraste o indicador de posição para percorrer o áudio
  • Funciona em dispositivos desktop e de toque

Cores

A forma de onda usa duas cores das configurações do Player:

  • Cor padrão do progresso - barras ainda não reproduzidas
  • Cor de reprodução do progresso - barras atrás do indicador de reprodução

Alterem em Texto para Voz → Player → Cores.

Desempenho

  • A forma de onda é um único SVG inline (~2 KB por player)
  • Nenhum JavaScript além do que o player já carrega
  • Não afeta os Core Web Vitals

Fallback para usuários gratuitos

Usuários do plano gratuito veem a barra de progresso linear mesmo que a opção Forma de onda esteja selecionada. É um recurso exclusivo do PRO.

Páginas relacionadas