Как работает визуализатор музыки: спектр, FFT, бит и шейдеры

Хороший визуализатор будто понимает музыку: пол подпрыгивает на бочке, на хай-хэтах летят искры, в припеве разгораются цвета. Никакой магии здесь нет. Любой визуализатор много раз в секунду делает две вещи: измеряет звук и рисует по этим измерениям картинку. Разберём, как устроена каждая часть.

1. От звуковой волны к спектру

Цифровой звук — это поток отсчётов, обычно 44 100 или 48 000 в секунду; каждый отсчёт — положение диффузора динамика в этот момент. Такая «сырая» волна показывает громкость, но не состав звука. Чтобы отделить басы от тарелок, визуализатор берёт короткий кусок отсчётов (часто 1024 или 2048) и применяет к нему быстрое преобразование Фурье (БПФ, по-английски FFT).

FFT раскладывает этот кусок на частотные полосы-«корзины» и показывает, сколько энергии в каждой. Это и есть спектр — тот самый ряд столбиков: низкие частоты слева, высокие справа. В браузере эту работу делает AnalyserNode из Web Audio API.

Корзины идут через равные промежутки в герцах, а слух устроен иначе: октава басов занимает пару корзин, а октава верхов — сотни. Поэтому визуализаторы перегруппировывают их по логарифмической шкале, а многие ещё и нормализуют спектр, чтобы и тихая, и громкая запись заполняли экран.

2. Басы, середина и верха

Большинству пресетов тысяча чисел не нужна. Им нужно несколько: насколько громко внизу, в середине и наверху. Сложив спектр по полосам, получаем именно это. Примерные границы: басы — около 20–250 Гц, середина — до нескольких килогерц, выше — верха, но каждый визуализатор проводит границы по-своему.

В Deus это Басы (низкие частоты), Середина (вокал, клавишные, гитары) и Верха (воздух и тарелки), а рядом общий Уровень. Тоннель может ускоряться от басов, а верха — добавлять блеска.

3. Сглаживание: почему столбики не мерцают

Сырые значения FFT скачут от кадра к кадру и, если рисовать их как есть, мерцают. Поэтому визуализаторы их сглаживают — обычно смешивают новое значение с предыдущим. Часто подъём и спад идут с разной скоростью: быстро вверх, чтобы удар ощущался мгновенно, и медленно вниз, чтобы картинка не дёргалась. Степень сглаживания — компромисс между плавностью и точностью попадания в ритм.

4. Атаки и биты: бочка, снейр и хай-хэт

Сглаживание размывает именно то, что слушатель замечает первым, — удары. Поэтому их измеряют отдельно. Обычный способ — поиск атак (onset detection): следить, как быстро растёт энергия, сравнивать с недавним средним и срабатывать, когда скачок превышает порог. В низкой полосе так ловится бочка, в средней и шумовой — малый барабан и хлопки, на самом верху — хай-хэты и шейкеры.

В Deus для этого есть несколько признаков: Атака (резкие всплески по всему спектру), Импульс басов и Импульс верхов (резкие подъёмы), а также отдельные детекторы Бочки, Снейра и Хай-хэта. Энергия показывает, насколько насыщенными были последние секунды, — так пресет может разгоняться к дропу и успокаиваться в брейкдауне.

5. Ноты

Некоторые визуалы следят не за ритмом, а за гармонией. Если свернуть спектр в 12 классов высоты (до, до-диез, ре и так далее, без учёта октавы), получится хрома-вектор: какие ноты звучат прямо сейчас. В Deus это Ноты, их используют пресеты, реагирующие на ноты.

6. Рисование: шейдеры на видеокарте

Измерения — это лишь горстка чисел на кадр. Основная работа — в картинке. Современные визуализаторы рисуют шейдерами: маленькими программами, которые выполняются на видеокарте, часто по разу на каждый пиксель экрана, параллельно. Звуковые признаки приходят в них как входные параметры (uniform-переменные), а шейдер превращает их в цвет: скорость тоннеля, приближение фрактала, яркость вспышки.

Собственные сцены Deus — это шейдеры на WebGL. В Deus Studio можно написать свой на GLSL: на вход доступны живые массивы частот, уровень, басы, середина, верха, импульсы, удары барабанов и интенсивность нот, а также mainImage и iTime в стиле Shadertoy.

7. Обратная связь: приём MilkDrop

MilkDrop, визуализатор времён Winamp, прославил простую идею. Каждый кадр начинается с предыдущего — чуть приближенного, повёрнутого и искажённого, — а поверх рисуются новые волны. Раз каждое изображение питает следующее, мелкие движения складываются в шлейфы, тоннели и «жидкие» узоры. Биты и громкость управляют приближением и цветом. Deus проигрывает классические пресеты MilkDrop прямо в браузере, с указанием авторов.

8. Совсем без анализа: XY-осциллограф

Осциллограф вообще обходится без спектра. Он рисует сырую стереоволну, каждый отсчёт: левый канал двигает луч по горизонтали, правый — по вертикали. Моно рисует диагональную линию, широкое стерео — фигуры, а музыка, написанная специально для осциллографа, — целые картинки. Подробнее — в статье про осциллографическую музыку.

Почему одни треки выглядят лучше других

Визуализатор реагирует на то, что можно измерить. Музыка с чёткими барабанами и плотным низом даёт ясные удары бочки и сильные качели басов. В эмбиенте, сольном фортепиано или речи резких атак мало, и картинка движется спокойнее. А сильно сжатый мастеринг может держать все полосы почти на максимуме, и контраста для картинки остаётся меньше.

Попробуйте на своей музыке

В Deus каждый пресет — WebGL, Canvas 2D, MilkDrop или осциллограф — слушает один и тот же анализ, который выполняется локально в браузере для выбранной вами вкладки. Ничего не записывается и не загружается. Начните с визуализации любой вкладки или сделайте из этого видео.