[Перейти к содержимому]

Музыкальный визуализатор для YouTube и видео HTML5

Смотрите, как ваша музыка движется с живыми эффектами Blocks, Frequency и Music Tunnel

Музыкальный визуализатор — это графический эффект в реальном времени, который рисует анимированные фигуры из звукового сигнала: полосы, волны или туннели, движущиеся в такт звуку. Бесплатное расширение Turn Off the Lights отображает его прямо поверх любого видеоплеера HTML5: музыкальный клип YouTube, концерт на Vimeo или проигрыватель подкастов получают живое световое шоу без установки отдельного приложения.

Блоки аудиовизуализатора на сайте YouTube
Блоки аудиовизуализатора на сайте YouTube

Три стиля визуализации

Функция визуализации звука слушает звук видео через AnalyserNode Web Audio API браузера и рисует результат на слое canvas поверх видео. Стиль выбирается на странице настроек:

Непрозрачность фона каждого стиля регулируется, поэтому эффект может быть едва заметным свечением поверх видео или смелым эффектом, заполняющим весь плеер. А поскольку визуализация — это кнопка на той же панели инструментов видео, что и контроллер скорости видео и масштаб видео, вы можете включить её для одного трека и выключить для следующего, не покидая страницу. Она работает даже в плавающем окне «картинка в картинке», где музыкальная визуализация продолжает играть в своём мини-плеере.

Как включить визуализацию звука

  1. Установите бесплатное расширение Turn Off the Lights для Chrome, Firefox, Edge, Opera, Safari или вашего любимого браузера.
  2. Щёлкните правой кнопкой мыши по серой кнопке-лампочке на панели инструментов браузера и выберите Настройки.
  3. Откройте вкладку Расширенные настройки, найдите раздел Панель инструментов видео и включите Панель инструментов видео.
  4. Запустите любое видео HTML5: выбранная визуализация звука появится как живой оверлей на видеоплеере, реагируя на звук в реальном времени.

Где это работает

Визуализация звука работает на стандартных видеоплеерах HTML5, то есть на YouTube, YouTube Music, Vimeo, Dailymotion и большинстве других сайтов, воспроизводящих видео или аудио HTML5 в браузере. Сочетайте её с Atmosphere Lighting — ореолом вокруг рамки видео — для полной атмосферной установки и затемните остальную часть страницы кнопкой-лампочкой для полного эффекта Turn Off the Lights.

Часто задаваемые вопросы

Что такое музыкальный визуализатор?

Музыкальный визуализатор — это графический эффект в реальном времени, который рисует анимированные фигуры из звукового сигнала, например полосы, волны или туннели, движущиеся в такт звуку. Turn Off the Lights отображает его прямо поверх любого видео HTML5 в вашем браузере.

Какие стили визуализации можно выбрать?

Есть три встроенных стиля: Blocks — цветные блоки, поднимающиеся в такт; Frequency — живой спектр звуковых частот; и Music Tunnel — вращающийся туннель, пульсирующий в такт музыке. Вы также можете настроить непрозрачность оверлея.

Работает ли визуализация звука на YouTube и YouTube Music?

Да. Она работает на стандартных видеоплеерах HTML5, то есть на YouTube, YouTube Music, Vimeo, Dailymotion и большинстве других сайтов, воспроизводящих видео или аудио HTML5 в браузере.

Визуализация звука бесплатна?

Да. Она включена в бесплатное расширение для браузера с открытым исходным кодом Turn Off the Lights, без встроенных покупок и подписок, для Chrome, Firefox, Edge, Opera, Safari и других поддерживаемых браузеров. Вы можете прочитать код сами на GitHub.

Это идеальный инструмент для вашего браузера, чтобы управлять работой в сети и просмотром видео, созданный для таких любителей видео, как вы. Скачайте Turn Off the Lights сегодня и увидьте, как ваша музыка оживает.