Аудио-визуализатор — красивый интерактивный инструмент для отображения звуковых частот и амплитуд в режиме реального времени. Он позволяет подключать как микрофон, так и системный аудиопоток, создавая красочные и динамичные визуальные эффекты, которые реагируют на аудио-сигнал.
При переключении с микрофона на системные звуки, ваш браузер потребует подтвердить доступ. Переключите со вкладок на «Весь экран», кликните на картинку экрана и активируйте кнопку «Предоставить доступ к аудиоданным системы».
Источники звука для ЦМУ
- Микрофон: Визуализация звука с микрофона ПК или смартфона, идеально подходит для анализа живых звуков, голоса или инструментов.
- Системный звук: Позволяет захватывать и визуализировать аудио, воспроизводимое на устройстве (например, музыка из плеера или видео).
Визуальные эффекты
Можете выбрать один из нескольких эффектов визуализации звука:
- Бары: Классический вид спектра с вертикальными полосами, окрашенными в выбранный цвет или радужные оттенки.
- Линия: Гладкая спектральная линия с радужной заливкой и цветными переходами.
- Круги: Ряд кругов, размеры которых изменяются в зависимости от уровня звука на разных частотах.
- Волны: Многослойные анимированные волны с плавным движением и частицами, создающие эффект живого звукового пейзажа.
- Комбо: Радиальная визуализация с лучами, исходящими из центра, с градиентами и плавным изменением толщины.
Управление и настройки
- FFT (Fast Fourier Transform) размер: Позволяет выбрать степень детализации частотного анализа (от 256 до 4096), влияя на плавность и точность визуализации.
- Количество полос (Bar Count): Регулирует количество отображаемых полос/элементов спектра (от 8 до 512).
- Чувствительность: Настраивает масштаб визуализации амплитуды, чтобы добиться оптимального отклика на громкость звука.
- Цвет: Можно выбрать основной цвет визуализации или оставить радужный режим по умолчанию.
- Фон: Позволяет установить цвет фона канваса для лучшего визуального восприятия.
Дополнительные функции
- Режим полного экрана: Позволяет развернуть визуализацию на весь экран для погружения и показа на больших дисплеях.
- Автоматическое скрытие управляющих элементов: В полноэкранном режиме контролы автоматически скрываются, чтобы не отвлекать от визуализации, и появляются при движении мыши.
- Адаптивный дизайн: Интерфейс удобно работает как на больших экранах, так и на мобильных устройствах.
Технические детали цветомузцки
- Визуализация реализована на HTML5 Canvas с использованием JavaScript.
- Для анализа звука используется Web Audio API, который получает данные с выбранного аудио источника и преобразует их в частотный спектр.
- Поддерживаются разные размеры FFT для гибкой настройки качества анализа.
- Эффекты рисуются динамически, используя методы Canvas API для создания ярких и плавных анимаций.
- Пользовательские настройки (цвета, эффекты, чувствительность) сохраняются в localStorage, чтобы при повторном посещении страницы вернуть ваши предпочтения.
Как использовать программу
- Выберите источник звука — микрофон или системный звук.
- Настройте визуальный эффект и параметры (FFT, количество полос, цвет и фон).
- При желании активируйте полноэкранный режим для максимального погружения.
- Наслаждайтесь живой, синхронизированной с музыкой или звуками визуализацией!
Работает в современных браузерах с поддержкой Web Audio API и getUserMedia (Chrome, Firefox, Edge, Safari). Требуется разрешение на доступ к микрофону или системному аудио. Если требуется более точное построение АЧХ сигнала с привязкой к реальной частоте и амплитуде — используйте онлайн спектроанализатор.
