O que é Visualizador de Áudio?

Veja seu áudio em tempo real como forma de onda, barras de frequência, espectro circular ou espectrograma rolante. Cada visualização reage à música enquanto ela toca.

O visualizador puxa áudio de um arquivo ou do microfone, passa por um AnalyserNode da Web Audio API e desenha os dados de frequência ou tempo num canvas a 60 fps. Escolha forma de onda, barras de frequência, barras espelhadas, espectro circular ou um espectrograma rolante; ajuste o quadro para panorâmico, quadrado ou vertical em qualquer plataforma; use uma cor de fundo predefinida ou personalizada; troque o esquema de cor entre laranja, néon, oceano, monocromático e arco-íris; ajuste a sensibilidade e a quantidade de barras; salve um quadro como PNG; ou toque no botão de vídeo para exportar um clipe WebM com o áudio já embutido.

Como usar

  1. Carregue um arquivo de áudio ou use a entrada do microfone
  2. Escolha um estilo de visualização: forma de onda, barras de frequência, barras espelhadas, espectro circular ou espectrograma rolante
  3. Reproduza o áudio e veja a visualização responder em tempo real

Quando usar

  • Fazer a capa de um single tirando uma captura do espectro em barras no pico mais alto da faixa.
  • Gravar um clipe WebM compartilhável da sua faixa com o visualizador sincronizado para posts em redes sociais ou uploads no YouTube.
  • Mostrar a alunos de sound design como mudanças de EQ alteram o formato espectral de uma música.

Resultado

Um streamer adiciona um visualizador de áudio ao vivo à sua transmissão de música, exibindo barras de frequência coloridas que pulsam com a batida.

Perguntas frequentes

Como é definido o degradê de cores das barras e da onda?
Cada esquema mapeia o valor de frequência ou amplitude para uma rampa de cor. Arco-íris percorre todo o HSL, neon usa rosa e ciano saturados, oceano fica nos azuis, monocromático é cinza e laranja casa com a paleta do site.
Por que o navegador pede permissão de microfone toda vez?
O navegador bloqueia o microfone até você liberar explicitamente. Permitindo uma vez na sessão, ele costuma manter; se negou antes, é preciso apagar a permissão do site nas configurações do navegador e recarregar.
Como gravo a visualização inteira em vídeo, e não só um frame?
Toque no ícone de vídeo sobre o canvas para gravar a visualização ao vivo com o áudio incorporado em WebM. Para arquivos capturamos a faixa inteira desde o começo; para o microfone gravamos um clipe de 30 segundos. O botão PNG ao lado captura um único quadro se você só precisa de uma imagem parada.
O que o controle deslizante de sensibilidade muda na prática?
Ele escala a amplitude antes da renderização. Valores baixos mantêm as barras dentro do quadro em masters muito altos; valores altos exageram fontes silenciosas, como um sussurro ou um violão dedilhado limpo.
Por que aparecem só algumas barras ao tocar um tom puro?
Uma senoide pura tem uma fundamental e poucos harmônicos, então a maioria dos bins da FFT marca quase zero. É o espectro funcionando como deveria. Toque música ou fala para ver a faixa toda acender.

Ferramentas relacionadas