Что такое Визуализатор Аудио?

Смотрите на свой звук в реальном времени в виде осциллограммы, частотных столбцов, кругового спектра или прокручиваемой спектрограммы. Каждый режим реагирует на музыку во время воспроизведения.

Визуализатор берёт звук из файла или с микрофона, прогоняет через Web Audio AnalyserNode и рисует данные по частоте или времени на холсте при 60 кадрах в секунду. Выбирайте волну, столбцы частот, зеркальные столбцы, круговой спектр или прокручиваемую спектрограмму, задавайте холсту широкий, квадратный или вертикальный формат под любую площадку, ставьте цвет фона из набора или свой, переключайте цветовую схему между оранжевой, неоновой, океанской, монохромной и радужной, регулируйте чувствительность и число столбцов, сохраняйте кадр в PNG или жмите кнопку видео, чтобы выгрузить WebM-клип со звуком внутри.

Как использовать

1. Загрузите аудиофайл или используйте вход с микрофона
2. Выберите стиль визуализации — волна, столбцы частот, зеркальные столбцы, круговой спектр или прокручиваемая спектрограмма
3. Воспроизведите аудио и наблюдайте за визуализацией в реальном времени

Когда использовать

• Сделать обложку сингла, сняв скриншот столбчатого спектра в самый громкий момент трека.
• Записать шарящийся WebM-клип своего трека с синхронной визуализацией для соцсетей или загрузки на YouTube.
• Показать студенту саунд-дизайна, как разные движения по EQ меняют спектральный рисунок трека.

Результат

Стример добавляет живую визуализацию к музыкальному стриму — яркие частотные столбцы пульсируют в такт биту.

Частые вопросы

Откуда берутся цвета градиента у столбиков и волны?

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

Почему браузер каждый раз спрашивает разрешение на микрофон?

Браузер не пускает страницу к микрофону, пока вы явно не согласитесь. Если разрешить один раз в текущей сессии, разрешение обычно держится; если раньше отказали, сбросьте право сайта на микрофон в настройках браузера и перезагрузите страницу.

Как записать всю визуализацию, а не один кадр?

Нажмите иконку видео над холстом, чтобы записать визуализацию вживую вместе со звуком в формате WebM. Для файлов мы пишем трек целиком с начала, для микрофона — клип длиной тридцать секунд. Кнопка PNG рядом сохраняет один кадр, если нужен только статичный снимок.

Что именно меняет ползунок чувствительности?

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

Почему при чистом тоне видно всего пару столбиков?

Чистая синусоида состоит из одной основной частоты и пары обертонов, поэтому большинство ячеек FFT близки к нулю. Это правильное поведение спектра. Включите музыку или речь — и весь диапазон зажжётся.

Похожие инструменты