Главное Свежее Вакансии Образование
11 920 2 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Способы визуализации музыки в вебе

Помните Windows Media Player? Тот самый, который умел из любимого трека твоего соседа по общаге вырастить на экране разноцветную обкуренную медузу. Та бодро дрыгалась в такт басам из сабвуфера (сорян, «савбуфера»), на дворе цвел две тысячи седьмой, водка была по три писят, кажется.

1504176085370-image8.png

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

Визуализация волны

Если ты тоже резал mp3-шки в каком-нибудь Саундфордже или Аудишене (потому что на смартфон образца 2007-го песня полностью не влезала) — то видел рисунок звуковой дорожки. Эти самые пики и впадины.

1504176065440-image4.jpg

Это один из самых очевидных способов визуализации звуковой дороги — нарисовать, где тихо, где громко, где низко, а где высоко. Подобные скрипты визуализации используются в популярных музыкальных сервисах, таких как Soundcloud, PromoDJ и прочих.

Даже для Вордпресса нашелся плагин под названием Wave Surfer, который визуализирует звук в виде волнового рисунка.

1504176100451-image9.png

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

Спектрограмма

Есть достаточно узкоспециализированный JS-скрипт, который превращает любую музыку в спектрограмму — диаграмму, на которой представлены частота и амплитуда звука в зависимости от времени

Кому такое нужно? Например, профессиональным музыкантам: с помощью таких изображений можно анализировать музыку и определять проблемные места. Также на основе скрипта можно создать целый арт-проект: в спектрограммы можно зашифровывать целые изображения. Чем и пользуются некоторые энтузиасты: знаменитый диджей Aphex Twin закодировал в один из своих треков жутковатое лицо, композитор игры Doom нарисовал число дьявола и пентаграмму, а создатели выходящего в скором будущем фильма «Мама!» «вписали» лицо главного героя в звуковое сопровождение поста в Инстаграме.

1504176061956-image2.jpg

Скрипт написан на основе инструментария Web Audio API и сопровождается подробной инструкцией к пользованию. Пример работы — вот здесь.

Терменвокс

Помните тот противный музыкальный инструмент, которым Шелдон доставал друзей в одном из эпизодов «Теории большого взрыва»? Такой можно добавить на сайт с помощью готового скрипта — да ещё и с оригинальной визуализацией.

В итоге получается симулятор терменвокса — инструмент, который изменяет тональность и громкость звука, когда вы перемещаете курсор по экрану. Поразвлекайтесь вот.

1504176084655-image7.jpg

Трёхмерный эквалайзер

Два измерения хорошо, а три лучше. Этот скрипт — 3D-эквалайзер

Получается довольно залипательная картинка, которую, к тому же, можно вращать с помощью курсора. На сайте разработчика находятся исходный код а также детальная инструкция, как с помощью Web Audio Api и WebGL начать творить магию. По заверениям авторов, скрипт стабильно работает на Chrome, Firefox и Safari. Вот демодля опытов.

1504176061957-image3.jpg

Стробоскоп

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

Регулируется большой набор параметров, от цвета источников света до их количества и амплитуды мерцания.

Скрипт доступен для использования как как в Mozilla Audio Data API, так и в Webkit Web Audio API с обратной поддержкой Flash.

Слинки

А эта визуализация — отличный повод для ностальгии: дело в том, что этот эквалайзер очень похож на радужную пружинку-слинки, с которой мы все так любили играть в детстве («Слинки? Андамания!» — скажут тру-олдфаги).

Скрипт с очень красивой графикой и настройкой параметров: пружинке можно задать форму, количество линий, интенсивность свечения — плюс присутствует возможность покрутить слинки мышкой. Опробовать скрипт можно здесь.

1504176110765-image10.jpg

Музыкальная игра

Скрипт avabranch позволяет визуализировать музыку в виде простенькой ритм-игры прямо в вашем браузере. Вы управляете двумя полосками, которые символизируют конкретные музыкальные инструменты — ударные и трубу. Проходя через ключевые точки, вы «прирастаете» новыми полосками — фортепиано и ксилофоном. Еще там есть препятствия, врезаясь в которые, вы можете потерять одну или несколько полосок — а то и все сразу. Как только одна из полосок отпадает — соответствующий инструмент перестает играть.

Это замечательная возможность оживить музыку и вовлечь пользователя в процесс. Проблема разве что в том, что каждый трек, который будет использован в этом скрипте, должен быть разбит на составляющие — нельзя просто пройти Unforgiven или «Группу крови».

1504176070668-image6.jpg

Оценить оригинальность задумки, а заодно и попробовать свои силы, можно тут.

+4
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Михаил Мясников
О да!
Меня, тема визуализации музыки, давненько так заинтересовала. Даже одно время была идея, сделать сервис в вебе, куда можно было бы загружать музыку и на экране воспроизводилась бы сверхкрасивая анимация ; не обычный эквалайзер а что-то вроде, как упомянул автор "обкуренных медуз" в Windows Media Player, только сильно круче.

Как-то, наткнулся на работу художника Daniel Sierra по визуализации музыки. В 3D Houdini, он сделал анимацию синусоидальной волны, синхронизировав её движения с музыкой, созданной специально для своего проекта.

Глянуть его работу можно здесь : https://vimeo.com/65475425#
Ответить
Design Glory
Как раз актуально
Спасибо
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.