Визуализатор аудио

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

Микрофон

Визуализатор аудио

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

Нажмите кнопку «Запустить» ниже, чтобы начать

Тема

Руководство по визуализатору аудио

Руководство по использованию визуализатора аудио

Базовое использование

  1. Нажмите кнопку «Запустить»
  2. Разрешите доступ к микрофону во всплывающем окне браузера
  3. Говорите, пойте или включите музыку в микрофон
  4. Наблюдайте динамическую графику в реальном времени

Четыре режима визуализации

Спектр-столбцы

Отображает распределение частот аудио в виде столбчатой диаграммы — низкие частоты слева, высокие справа, высота столбца отражает энергию в каждой частотной полосе. Отлично подходит для наблюдения за распределением басов/высоких частот.

Форма волны

Показывает временну́ю форму звука в стиле осциллографа, с симметричными двухслойными светящимися линиями, визуализирующими изменения амплитуды и частоты.

Круговой

Раскрывает спектр в кольцо на 360 градусов. Центральный круг пульсирует в такт громкости, внешние столбцы подпрыгивают в такт частоте — самый впечатляющий визуально режим.

Оркестр

[Интеллектуальное разделение тембров] Анализ звуковых характеристик в реальном времени автоматически разделяет и отображает 5 семейств инструментов:

  • 🥁 Ударные: обнаруживают транзиенты (резкие всплески энергии)
  • 🎸 Бас: распознавание низкочастотной гармонической структуры
  • 🎤 Вокал/Струнные: насыщенные средние гармоники (голос, скрипка)
  • 🎷 Духовые: яркие средне-высокие гармоники (флейта, кларнет)
  • ✨ Тарелки: обнаружение спектральной плоскостности для шумоподобных высоких частот

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

Элементы управления

  • Чувствительность: регулирует усиление аудиосигнала (0,3–3,0); бóльшие значения дают более выразительную графику
  • Сглаживание: регулирует коэффициент сглаживания спектра (0–0,95); бóльшие значения дают более плавные переходы
  • Тема: пять цветовых схем — Неон, Огонь, Океан, Лес, Фиолетовая

Горячие клавиши

  • Space: запустить/остановить захват
  • 1 / 2 / 3 / 4: переключение между режимами Столбцы / Волна / Круговой / Оркестр

Технические принципы

Web Audio API

Этот инструмент построен на базе Web Audio API браузера. Он получает аудиопоток микрофона через getUserMedia, использует AnalyserNode для анализа БПФ (быстрое преобразование Фурье) в реальном времени, преобразуя сигнал из временной области в частотную, а затем отрисовывает визуализацию на контексте Canvas 2D.

Частотный анализ

  • Размер БПФ: 2048, что соответствует 1024 частотным корзинам
  • Частота дискретизации: обычно 44100 Гц или 48000 Гц
  • Частотное разрешение: частота дискретизации / размер БПФ, ~21–23 Гц на корзину
  • Диапазон слышимости человека: ~20 Гц – 20000 Гц

Советы

  • Рекомендуется браузер Chrome или Edge для наилучшей производительности
  • Используйте наушники или внешние колонки, чтобы избежать обратной связи микрофона
  • Меньший фоновый шум даёт более чистую графику
  • Полноэкранный режим обеспечивает более immersive (погружающее) впечатление