¿Cómo funciona un visualizador de música? FFT, detección de ritmo y shaders
Un buen visualizador parece entender la música: el suelo salta con el bombo, saltan chispas con los hi-hats y los colores crecen cuando entra el estribillo. No hay magia detrás. Todos los visualizadores hacen los mismos dos trabajos, muchas veces por segundo: miden el sonido y luego dibujan una imagen a partir de esas medidas. Así funciona cada parte.
1. De la onda sonora al espectro
El audio digital es una secuencia de muestras, normalmente 44 100 o 48 000 por segundo, y cada una indica la posición del cono del altavoz en ese instante. Esa forma de onda en bruto te dice lo fuerte que suena, pero no qué contiene. Para ver por separado los graves y los platillos, un visualizador toma un fragmento corto de muestras (a menudo 1024 o 2048) y le aplica una transformada rápida de Fourier (FFT).
La FFT divide el fragmento en bandas de frecuencia y dice cuánta energía tiene cada una. Eso es el espectro: la conocida fila de barras, con los graves a la izquierda y los agudos a la derecha. En un navegador, el AnalyserNode de la Web Audio API lo hace por ti.
Esas bandas están repartidas por igual en hercios, pero el oído no funciona así: una octava de graves ocupa unas pocas bandas, mientras que una octava de agudos ocupa cientos. Por eso los visualizadores reagrupan las bandas en una escala logarítmica, y muchos también normalizan el espectro para que tanto las grabaciones suaves como las fuertes llenen la pantalla.
2. Graves, medios y agudos
La mayoría de los presets no necesitan mil números. Necesitan unos pocos: cuánto suena la parte baja, la media y la alta. Sumar el espectro por bandas da justo eso. Los límites aproximados son unos 20–250 Hz para los graves, hasta unos pocos kilohercios para los medios y, por encima, los agudos, pero cada visualizador traza las líneas de forma un poco distinta.
En Deus son Graves (la parte baja), Medios (voces, teclados, guitarras) y Agudos (el aire y los platillos), junto a un Nivel general. Un túnel puede avanzar más rápido con los graves, mientras que los agudos añaden destellos.
3. Suavizado: por qué las barras no parpadean
Los valores brutos de la FFT saltan de un fotograma a otro. Si se dibujan tal cual, parpadean. Por eso los visualizadores los suavizan, normalmente mezclando cada valor nuevo con el anterior. Muchos usan velocidades distintas para subir y bajar: suben rápido para que un golpe se sienta instantáneo y bajan despacio para que la imagen no dé tirones. La cantidad de suavizado es un equilibrio entre un movimiento tranquilo y una sincronía precisa.
4. Ataques y golpes: bombo, caja y hi-hats
El suavizado difumina justo lo que más se nota: los golpes. Por eso los golpes se miden por separado. La herramienta habitual es la detección de ataques (onset detection): observar lo rápido que sube la energía, compararlo con la media reciente y dispararse cuando supera un umbral. Vigilando la banda baja se captan los bombos, las bandas medias y ruidosas captan cajas y palmas, y la parte más alta capta hi-hats y shakers.
Deus ofrece esto como varias señales: Ataque (inicios bruscos en todo el espectro), Pulso de graves y Pulso de agudos (subidas repentinas), y detección separada de Bombo, Caja y Hi-hat. Energía sigue lo intensos que han sido los últimos segundos, para que un preset pueda crecer durante un drop y relajarse en un break.
5. Notas
Algunos visuales siguen la armonía, no el ritmo. Si se pliega el espectro en las 12 clases de altura (do, do♯, re y así sucesivamente, sin tener en cuenta la octava), se obtiene un vector de croma: qué notas suenan en este momento. Deus las llama Notas y las usa en los presets que reaccionan a las notas.
6. Dibujar: shaders en la tarjeta gráfica
Las medidas son solo un puñado de números por fotograma. El trabajo de verdad está en la imagen. Los visualizadores modernos dibujan con shaders: pequeños programas que se ejecutan en la GPU, a menudo una vez por cada píxel de la pantalla, en paralelo. Las señales de audio llegan como entradas (llamadas uniforms), y el shader las convierte en color: la velocidad de un túnel, el zoom de un fractal, el brillo de un destello.
Deus dibuja sus propias escenas como shaders WebGL. En Deus Studio puedes escribir uno tú mismo en GLSL, con arrays de frecuencias en vivo, nivel, graves, medios, agudos, pulsos, golpes de batería e intensidad de notas como entradas, y con mainImage e iTime al estilo de Shadertoy.
7. Realimentación: el truco de MilkDrop
MilkDrop, el visualizador de la época de Winamp, hizo famosa una idea sencilla. Cada fotograma parte del fotograma anterior, con un poco de zoom, rotación y deformación, y encima se dibujan ondas nuevas. Como cada imagen alimenta a la siguiente, los pequeños movimientos se acumulan en estelas, túneles y patrones líquidos. El ritmo y el volumen dirigen el zoom y el color. Deus reproduce presets clásicos de MilkDrop en el navegador, cada uno con el crédito de sus autores.
8. Sin ningún análisis: el osciloscopio XY
El osciloscopio se salta el espectro por completo. Dibuja la forma de onda estéreo en bruto, muestra a muestra: el canal izquierdo mueve el haz hacia los lados y el derecho, arriba y abajo. El sonido mono dibuja una línea diagonal, un estéreo amplio dibuja formas y la música hecha para ello dibuja imágenes. Más en música de osciloscopio.
Por qué unas canciones se ven mejor que otras
Los visualizadores reaccionan a lo que se puede medir. La música con una batería clara y graves potentes da bombos limpios y grandes cambios en los graves. El ambient, el piano solo o la voz hablada tienen pocos ataques bruscos, así que la imagen se mueve más despacio. Los másteres muy comprimidos pueden mantener todas las bandas cerca del máximo, lo que deja menos contraste que mostrar.
Pruébalo con tu música
En Deus, todos los presets, ya sean WebGL, Canvas 2D, MilkDrop u Osciloscopio, escuchan el mismo análisis, que se ejecuta localmente en tu navegador sobre la pestaña que elijas. No se graba ni se sube nada. Empieza por visualizar cualquier pestaña, o conviértelo en un video.