Визуализация аудио на сайте с помощью JavaScript | RUDEBOXМне на почту часто приходят вопросы, о том, как можно стилизовать музыку на сайта, к примеру фоновую. Создать обычную визуальное оформление это достаточно однообразно. В данном уроке мы рассмотрим как создать замечательную полноэкранную визуализацию, которая явно не оставит вас равнодушным. Для реализации данного эффекта нам понадобится исключительно javascript, стили нам понадобятся только для получения фона с эффектом градиентной заливки и уведомления о загрузке страницы.

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

Все реализованное в демо мы будем создавать с помощью js. Рассмотрим фрагмент кода, в котором мы добавим основные параметры, а именно скорость анимации, а именно блоков которые будут плавать в спокойном состоянии по экрану, их количество, COLORS, как вы уже поняли, будет отвечать за цветовые оттенки элементов на странице.

Визуализация аудио на сайте с помощью JavaScript | RUDEBOX

AudioAnalyser будет отвечать за проигрывание и правильное отображение ритма битов музыки. Автором данного скрипта является Justin Windle.

В демонстрации использован трек the_xx_-_intro который подключен через через js к нашему документу.

Вот и все. Готово!

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