Como funciona um visualizador de música? FFT, detecção de batidas e shaders

Um bom visualizador parece entender a música: o chão pula no bumbo, faíscas voam no chimbal, as cores crescem quando entra o refrão. Não tem mágica nisso. Todo visualizador faz os mesmos dois trabalhos, muitas vezes por segundo: mede o som e depois desenha uma imagem a partir dessas medidas. Veja como funciona cada parte.

1. Da onda sonora ao espectro

O áudio digital é uma sequência de amostras, normalmente 44.100 ou 48.000 por segundo, cada uma indicando a posição do cone do alto-falante naquele instante. Essa forma de onda crua diz o quanto o som está alto, mas não o que tem dentro dele. Para ver o grave e os pratos separadamente, o visualizador pega uma pequena fatia de amostras (muitas vezes 1.024 ou 2.048) e aplica nela uma Transformada Rápida de Fourier (FFT).

A FFT divide a fatia em faixas de frequência (bins) e diz quanta energia há em cada uma. Isso é o espectro: a conhecida fileira de barras, notas graves à esquerda, agudas à direita. No navegador, o AnalyserNode da Web Audio API faz isso por você.

Os bins são espaçados igualmente em hertz, mas a audição não é: uma oitava de grave ocupa poucos bins, enquanto uma oitava de agudo ocupa centenas. Por isso os visualizadores reagrupam os bins em escala logarítmica, e muitos também normalizam o espectro para que gravações baixas e altas preencham a tela do mesmo jeito.

2. Graves, médios e agudos

A maioria dos presets não precisa de mil números. Precisa de poucos: quão alto está o grave, o meio, o topo. Somar o espectro em bandas dá exatamente isso. Os limites aproximados ficam em torno de 20–250 Hz para os graves, até alguns quilohertz para os médios, e acima disso os agudos, mas cada visualizador traça essas linhas de um jeito um pouco diferente.

No Deus, elas se chamam Graves (a parte de baixo), Médios (vozes, teclados, guitarras) e Agudos (brilho e pratos), ao lado de um Nível geral. Um túnel pode andar mais rápido com os graves, enquanto os agudos acrescentam brilho.

3. Suavização: por que as barras não tremem

Os valores crus da FFT pulam de um quadro para outro. Desenhados direto, eles piscam. Por isso os visualizadores os suavizam, normalmente misturando cada valor novo com o anterior. Muitos usam velocidades diferentes para subir e descer: sobem rápido para a batida parecer instantânea e descem devagar para a imagem não tremer. A quantidade de suavização é um equilíbrio entre movimento calmo e precisão no tempo.

4. Ataques e batidas: bumbo, caixa e chimbal

A suavização borra justamente o que as pessoas mais notam: as batidas. Por isso elas são medidas à parte. A ferramenta comum é a detecção de ataques (onset detection): observar a rapidez com que a energia sobe, comparar com a média recente e disparar quando ela passa de um limite. Observar a banda grave pega os bumbos, as bandas médias e ruidosas pegam caixas e palmas, e o topo pega chimbais e chocalhos.

O Deus expõe isso em várias medidas: Ataque (ataques bruscos em todo o espectro), Pulso de graves e Pulso de agudos (subidas repentinas) e detecção separada de Bumbo, Caixa e Chimbal. A Energia acompanha o quanto os últimos segundos foram agitados, para que um preset possa crescer durante um drop e relaxar num breakdown.

5. Notas

Alguns visuais seguem a harmonia, não o ritmo. Dobrar o espectro nas 12 classes de altura (Dó, Dó♯, Ré e assim por diante, ignorando a oitava) gera um vetor de croma: quais notas estão soando agora. O Deus chama isso de Notas e usa em presets que reagem às notas.

6. Desenho: shaders na placa de vídeo

As medidas são só alguns números por quadro. O trabalho pesado está na imagem. Os visualizadores modernos desenham com shaders: pequenos programas que rodam na GPU, muitas vezes uma vez para cada pixel da tela, em paralelo. As medidas de áudio chegam como entradas (chamadas uniforms), e o shader as transforma em cor: a velocidade de um túnel, o zoom de um fractal, o brilho de um flash.

O Deus desenha as próprias cenas como shaders WebGL. No Deus Studio, você pode escrever um em GLSL, com arrays de frequência ao vivo, nível, graves, médios, agudos, pulsos, batidas de bateria e intensidade das notas como entradas, além de mainImage e iTime no estilo do Shadertoy.

7. Realimentação: o truque do MilkDrop

O MilkDrop, o visualizador da era do Winamp, tornou famosa uma ideia simples. Cada quadro começa a partir do quadro anterior, com um pouco de zoom, rotação e distorção, e novas ondas são desenhadas por cima. Como cada imagem alimenta a seguinte, pequenos movimentos se somam em rastros, túneis e padrões líquidos. As batidas e o volume comandam o zoom e a cor. O Deus toca presets clássicos do MilkDrop no navegador, cada um com o crédito dos seus autores.

8. Sem análise nenhuma: o osciloscópio XY

O osciloscópio pula o espectro por completo. Ele desenha a forma de onda estéreo crua, amostra por amostra: o canal esquerdo move o feixe para os lados, o direito para cima e para baixo. Som mono desenha uma linha diagonal, estéreo aberto desenha formas, e música feita para isso desenha imagens. Mais em música para osciloscópio.

Por que algumas músicas ficam mais bonitas que outras

Os visualizadores reagem ao que dá para medir. Música com bateria clara e grave forte gera bumbos nítidos e grandes variações de grave. Ambient, piano solo ou fala têm poucos ataques bruscos, então a imagem se mexe mais devagar. Masters muito comprimidas podem manter todas as bandas perto do topo, o que deixa menos contraste para mostrar.

Teste com a sua música

No Deus, todo preset, seja WebGL, Canvas 2D, MilkDrop ou Osciloscópio, ouve a mesma análise, feita localmente no navegador sobre a aba que você escolher. Nada é gravado nem enviado. Comece visualizando qualquer aba ou transforme tudo em um vídeo.