Como ele é
No modo radial, um disco com degradê de anil e ciano pulsa no centro, cercado por um halo e por barras espelhadas que crescem conforme as frequências do som, das graves às agudas. Dois anéis finos ondulam em volta, girando devagar em sentidos opostos. No modo ondas, sete linhas atravessam a tela como fitas e se agitam mais no meio. Sem som, tudo respira de leve. Embaixo, uma pílula traz os botões de tocar e de microfone e uma linha de status. O som sintetizado é um acorde suave com notas soltas e eco.
Você pode estar procurando isto se pediu algo assim
- barrinhas que mexem com o som para a página do meu podcast
- aquele círculo que pulsa com a música, tipo player de rádio
- visualizador de som que funciona com o microfone da pessoa
- ondas animadas que reagem à voz para um app de meditação
- efeito de equalizador redondo em volta de um disco
- mostrar o som de forma visual na página do evento
Também chamado de
- visualizador de áudio
- espectro de áudio
- equalizador animado
- sound visualizer
- music visualizer
- onda sonora animada
- barras que dançam com o som
Quando usar
- Página de podcast, programa de rádio ou lançamento musical
- Produtos de voz, meditação ou bem-estar que usam som ambiente
- Abertura de evento ou festival com uma peça sonora
- Teste de microfone antes de uma gravação ou chamada
Quando evitar
- Quando o som não faz parte da proposta e o visual vira só enfeite
- Sites servidos sem HTTPS, em que o microfone fica indisponível
Como pedir para a sua IA
Crie um visualizador de áudio em Canvas 2D com barras radiais em volta de um disco que pulsa e um modo em ondas, reagindo a um som ambiente que só toca após clique ou ao microfone, com mensagens claras de permissão, cores da marca e animação parada para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Pandeiro
Pandeiro toca som por conta própria?
Não. Pandeiro só cria o som ambiente depois que a pessoa clica em tocar, com volume que sobe aos poucos em pouco mais de dois segundos. O microfone também só é ativado pelo botão, e o componente mostra uma mensagem quando a permissão é negada, quando não há microfone ou quando a página não está em HTTPS.
Pandeiro respeita quem prefere menos movimento?
Sim. Com a redução de movimento ativa e sem som tocando, Pandeiro congela a animação de espera e mostra uma imagem parada. Quando a pessoa liga o som ou o microfone, as barras voltam a reagir ao áudio. O desenho também para quando o componente sai da tela.
O microfone de Pandeiro grava ou envia a voz?
Não há gravação nem envio no código. Pandeiro liga o microfone a um analisador de frequências só para desenhar as barras, sem reproduzir a voz nos alto-falantes, e encerra o acesso quando a pessoa clica em parar ou quando o componente sai da página.
