На сайтах adn.agency используются cookie-файлы и другие аналогичные технологии. Если, прочитав это сообщение, вы остаетесь на нашем сайте, это означает, что вы не возражаете против использования этих технологий.

Хорошо

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

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

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

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

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

image

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

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

image

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

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

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

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

image

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

Терменвокс

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

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

image

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

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

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

image

Стробоскоп

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

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

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

Слинки

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

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

image

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

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

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

image

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