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

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

Абстрактная визуализация аудио для сайта | RUDEBOX

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

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

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