Эквалайзер на JavaScript
На хабре уже было несколько статей по Web Audio API: создание визуализатора, вокодера и пианино в 30 24 строки. Поиск же по всея интернетам по запросу эквалайзер упорно выдавал туториалы по созданию спектрограмм. (Если заголовок этой статьи сбил вас с толку или вы таки купились на картинку:) и ожидали именно визуализации аудио — вам сюда или вот сюда). Но именно просто эквалайзера я так и не встретил (хотя уверен, что где-то он таки есть). Возможно, это настолько простая задача, что об этом и писать не стоит. Но, в таком случае, почему бы не сделать её ещё проще?
Что хотелось получить?
Пусть мы уже имеем какой-то плеер. В простейшем случае — это голый audio элемент.
Хочется, чтобы мы умели прикрутить к нему эквалайзер
чтобы не пришлось думать и это всё никак не сказалось бы на работе самого плеера.
Но, начнем с начала.
Любая работа с Web Audio API начинается с создания контекста:
Что важно — такой объект должен быть один. Во-первых, для того, чтобы все связанные объекты могли работать вместе, они должны быть созданны в одном контексте. Во-вторых, если контекстов создать несколько (по наблюдениям — 3-4), то браузер упадёт:)
(UPD: по сосстоянию на 21.09.15 при создании большего количества контекстов возикает ошибка Uncaught NotSupportedError: Failed to construct ‘AudioContext’: The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6) . То есть хром позволяет создать до шести контекстов одновременно.)
Первое, что нам понадобится — это создать обертку для HTMLMediaElement , с которой мы и будем работать:
Метод createMediaElementSource также работает и с элементами <video />
Объект source — это первое звено цепи (в прямом смысле), которую мы строим. В простейшем случае цепь состоит только из двух звеньев — источник сразу подключается к выходу.
Здесь context.destination — это, грубо говоря, ваши колонки.
Сам же эквалайзер строится из фильтров, создаваемых с помощью createBiquadFilter.
Код создания фильтра:
- type — тип фильтра. Может принимать одно из значений: lowpass, highpass, bandpass, lowshelf, highshelf, peaking, notch, allpass. Нам потребуется лишь peaking фильтр — он позволяет выборочно подчеркнуть или ослабить ограниченную полосу звукового спектра. Почитать подробнее.
- Q — добротность — изменяет ширину полосы частот, на которые фильтр влияет.
- gain — сила, с которой фильтр влияет на полосу частот.
Очень важно подключать фильтры именно последовательно. Когда я писал первую версию, у меня фильтры подключались параллельно, и на выходе не было ничего, кроме страшного грохота. Лекарство нашлось не сразу (в основном потому, что ответ, помеченный как ‘решение’, не является верным).
Остается только связать это всё воедино:
Вот так. Эквалайзер в 30 строк. Дальше дело за малым — привязать контролы, но это задача элементарная.
Вот, собственно, демка, где стримится ogg файл и пропускается через наш эквалайзер, но насладиться ей смогут только пользователи Google Chrome, пользователям же других браузеров придется потрудиться открыть локальный файл, да ещё и не абы какой. Потому что…
Момент разочарования
upd: как справедливо заметили в комментариях, CORS можно настроить с помощью атрибута crossorigin, но для этого в сам поток должен быть добавлен заголовок Access-Control-Allow-Origin .
А для загружаемых файлов, например, можно использовать ObjectURL :
Итого
В целом, Web Audio API уже поддерживается довольно неплохо и может широко использоваться. А главное — api позволяет писать очень высокоуровневый код, и вы можете в 30 строк написать собственный эквалайзер, если вам не нравится этот:)
PS Приятно узнать, что статья попала в топ хабра за 2014 год. 2ое место в категории API
Эквалайзер
Эквалайзер, как известно, предназначен для регулировки АЧХ звуковоспроизводящей аппаратуры. Он состоит из нескольких регуляторов, с помощью которых можно изменять коэффициент передачи усилительного устройства в достаточно узких полосах частот. Это позволяет получить сложную форму АЧХ, которую невозможно реализовать традиционными регуляторами тембра. В результате у слушателя появляется возможность существенно изменять характер воспроизводимой звуковой картины и таким образом компенсировать частотные искажения, вносимые источниками звуковых программ, акустическими системами и помещениями прослушивания.
Эквалайзеры обычно строят на базе активных полосовых фильтров на ОУ, причем чем больше фильтров, тем сильнее можно изменять АЧХ. Однако существенное увеличение их числа сильно усложняет управление эквалайзером, поэтому количество фильтров обычно ограничивают 8-10.
Ниже приводится описание восьми полосного эквалайзера. Диапазон его рабочих частот 20. 20 000 Гц; коэффициент передачи — 3. 4;
частоты настройки каждого из восьми фильтров указаны в таблице; добротность (отношение частоты настройки к полосе пропускания) фильтра — 1,12; диапазон регулировки коэффициента передачи — +_ 12,5 дБ.
Принципиальная схема эквалайзера приведена на рис. 1.
Он состоит из восьми параллельно включенных активных фильтров на сдвоенных ОУ DA2-DA5. На ОУ DA1 собран входной и выходной буферные усилители. Параллельно фильтрам включен резистор R4.
Поскольку все фильтры инвертирующие, а через резистор R4 сигналы проходят без инверсии, то в выходном усилителе сигналы вычитаются. Благодаря этому выравнивается АЧХ на краях полосы пропускания фильтров и получается требуемый диапазон регулировки коэффициента передачи в каждой полосе.
Схемы фильтров одинаковы, а частоты их настройки определяются емкостями конденсаторов С7-1-С7-8 и С8-1-С8-8, значения которых указаны в таблице.
| Частота настройки фильтра,Гц |
Емкость конденсаторов,пФ | |
| C7-1-C7-8 | C8-1-C8-8 | |
| 32 75 180 425 1000 2370 5620 13300 |
170 000 73 500 30 000 13 000 5 000 2 300 980 415 |
17 000 7 350 3 000 1 300 550 230 98 41 |
Перемещением движков резисторов R7 — 1-R7- 8 можно изменять коэффициент передачи соответствующих фильтров, а следовательно, и АЧХ в полосе этих фильтров. В крайнем левом положении (по схеме) движка этих резисторов коэффициент передачи на частоте настройки фильтров максимален (+12,5 дБ), а в крайнем правом — минимален (-12,5 дБ).
Все детали эквалайзера, кроме переменных резисторов, размещены на печатной плате из фольгированного текстолита, эскиз которой показан на рис. 2.
В эквалайзере можно использовать постоянные резисторы ВС и МЛТ, конденсаторы К50-6 (С5.С6) и КЛС, КМ, МБМ (остальные), причем для фильтров следует отобрать конденсаторы с небольшим TKE Конденсаторы С7 и С8 составлены из двух-трех, включенных параллельно. Функциональные характеристики переменных резисторов должны быть линейными (группа А), они могут быть как движковые, с линейным перемещением, так и осевые.
При использовании движковых резисторов (СПЗ-23А) можно сделать графический эквалайзер. Положение движков этих резисторов будет наглядно отражать АЧХ эквалайзера (рис.3).
При применении осевых резисторов СП, СПО и т. д. качество устройства нисколько не ухудшится, но снизится наглядность регулировки АЧХ. Какого-либо специального налаживания эквалайзер не требует, необходимо только заранее подобрать емкости конденсаторов фильтра с точностью не хуже 5. 10%. Для питания эквалайзера необходим двухполярный стабилизированный блок питания напряжением 12. 15 В и током до 50 мА.
Для стереофонического комплекса потребуется изготовить два описанных эквалайзера и установить в них сдвоенные переменные резисторы.
Как сделать эквалайзер в After Effects
В данном уроке мы разберём тему создания аудиоспектра или эквалайзера из изображения с помощью After Effects и Photoshop. Что такое «аудиоспектр» или как его еще называют «эквалайзер», думаю объяснять не стоит это и так всем понятно. Эффект аудиоспектра обычно применяют на фоновую заставку для какой-нибудь музыкальной композиции или подкаста.
1. Создание простого эквалайзера в After Effects
Для начала рассмотрим создание простого эквалайзера в After Effects. Создаём новый проект, параметры выставляет здесь следующие: размер я взял стандартный Full HD и чистоту кадров оставим на 25 кадров в секунду. Теперь, так как мы делаем проект для музыкального трека, здесь нужно выставить длительность нашего трека, в данном случае — это 3 минуты 12 секунд.
Создаём новую композицию, импортируем трек и помещаем его в композицию. Для этого кликаем правой кнопкой мыши по панели «Project» и в открывшемся меню выбираем «Import» — «File», находим аудио-файл на компьютере и импортируем его.
Чтобы поместить импортированный трек в композицию, просто берём его удерживая левую кнопку мыши и перетаскиваем на композицию.
В результате, на шкале времени появляется дорожка. Проигрываем композицию, выделив дорожку с треком и кликнув на пробел, и слышим, что звучит трек.
На фон давайте поставим какую-нибудь картинку, чтобы смотрелось всё симпатичнее. Импортируем данную картинку, точно так же, как и аудио-трек, затем так же помещаем её в композицию.
Для создания эквалайзера под трек нам понадобиться эффект «Audio Spectrum», он так и называется, поэтому чтобы его найти в панели «Эффекты и присеты» в поисковой строке пишем «Audio spectrum».
Теперь создаём новый слой-заливку, кликаем правой кнопкой мыши в панели слоёв и выбираем «New» — «Solid».
Здесь мы размер оставим по размеру композиции, т.е. Full HD и цвет заливки оставим чёрный.
Далее, просто перетаскиваем эффект «Audio spectrum» на слой с заливкой, удерживая левую кнопку мыши.
Теперь видим, что у нас тут уже отображаются вот такие вот еле видимые розовые точки — это и есть эквалайзер.
Если мы попробуем проиграть трек, то увидим, что с эквалайзером ничего не происходит, он не реагирует на аудио-файл. Для того, чтобы подключить эффект «Audio spectrum» к слою с треком необходимо в настройках эффекта параметру «Audio layer» показать наш слой с треком.
Теперь, если мы проиграем композицию, то увидим, что эквалайзер работает.
Ну собственно и всё, у нас есть простой эквалайзер, который теперь можно настроить как нам необходимо. Можно взять прямо этот слой, уменьшить или увеличить его, подвинуть в нужное место. Так же с помощью параметров данного эффекта можно настроить его внешний вид. В окне настроек данного эффекта куча всяких параметров, с помощью которых можно откорректировать внешний вид эквалайзера.
Здесь особо обяснять нечего, можете сами попробовать покрутить настройки. Есть еще и несколько разновидностей эквалайзера, например вот сейчас стоит цифровой (digital), тут в настройках можно поставить аналоговый линиями и аналоговый точками. Вообщем, вот таким образом делается простой эквалайзер в After Effects.
2. Создание эквалайзера из изображения
Теперь давайте создадим какой-нибудь аудиоспектр по интереснее стандартного. Эффект мы будем делать из изображения и для работы нам понадобиться Photoshop. Я взял вот такое изображение и хочу сделать эквалайзер из косичек вот этих девушек, ну точнее клонов девушки.
Для этого мне необходимо фоновое изображение с этими девушками, только без косичек и второе изображение на прозрачном фоне, т.е. в png формате с косичками, на которое мы и будем накладывать эффект.
Для быстрого вырезания я буду использовать инструмент «Быстрое выделение». Выбираю его и нажимаю «Выделить предмет».
Теперь кликаю правой кнопкой мыши по выделенным объектам и выбираю «Скопировать на новый слой». У нас получился новый слой с девушками, без заднего фона. Первый слой можно теперь просто скрыть, кликнув по иконке глаза напротив него.
Далее, на этом слое я просто удалю девушек обычным инструментом «ластик» и оставлю только косички.
После чего сохраняю это изображение в png формате, т.е. на прозрачном фоне. Выбираем в верхнем меню «Файл» — «Экспортировать» — «Сохранить для web» и сохраняем это изображение в папку нашего проекта на компьютер.
Теперь на первом слое, который мы скрыли, нужно сделать всё наоборот, т.е. удалить косички и оставить девушек на фоне.
Для этого я возьму инструмент «Точечная восстанавливающая кисть» и просто удалю косы. Тень от косичек тут можно было бы тоже удалить, но я не буду этого делать.
И сохраняю это изображение в обычном jpg формате. Выбираем в верхнем меню «Файл» — «Экспортировать» — «Сохранить для web» и сохраняем это изображение в папку нашего проекта на компьютер. Качество изображения при сохранении можно выставить на максимальное.
Переходим в After Effects и мпортируем сюда наши изображения, помещаем их в композицию и слой с косичками размещаем поверх слоя с девушками.
Теперь выделяем слой с косичками в шкале времени, кликаем по нему правой кнопкой мыши и выбираем «Keyframe Assistant» — «Convert Audio to Keyframes».
В результате у нас создался новый слой, который называется «Аудио амплитуда». Мы создали новый слой с амплитудой нашего трека и теперь мы можем применить эту амплитуду к любым свойствам и эффектам, которые можем наложить на любое из наших изображений.
Для начала откроем параметры этого слоя, здесь имеются стандартные параметры трансформирования и параметры эффектов. Нам нужны именно параметры эффектов.
Как мы видим, тут имеются такие свойства, как «Левый канал», «Правый канал» и «Оба канала». Если у нас трек в стерео, то мы можем работать отдельно, как с левым, так и с правым каналом, но для нашей задачи это не нужно, нам нужно именно сразу два канала. Поэтому вот эти свойства мы просто удалим. Выделяем их и нажимаем «Delete». Далее открываем свойства «Оба канала» и здесь имеется вот такая функция «Slider» — это и есть амплитуда обоих каналов с которой мы и будем работать.
Открываем свойства слоя с косичками. Тут имеются стандартные параметры, такие, как Anchor point, Position, Scale и прочие.
Любой из данных параметров слоя мы можем подключить к амплитуде. Подключение делается с помощью привязки. Например, параметр «Scale» отвечает за размер и если мы его подключим к слою с амплитудой, переместив мышью значок привязки на параметр «slider», то получим вот эффект уменьшения и увеличения косичек под музыку.
Изображение с косичками увеличивается и уменьшается в размере под аудио амплитуду под наш трек. Вот таким образом можно каждый из стандартных параметров слоя подключать к амплитуде, тем самым создавать определённый эффект эквалайзера.
Но нам тут нужно сделать косички в виде эквалайзера, поэтому стандартные параметры не подойдут. Здесь нужно воспользоваться каким нибудь эффектом. Т.е. к слою с изображением косичек нужно подключить эффект и привязать этот эффект к амплитуде. Удалим созданный нами эффект, зажав комбинацию клавиш Ctrl + Z на клавиатуре.
В After Effects существует огромное количество стандартных эффектов, любой из которых можно для данной цели задействовать, но мы возьмём именно нужный нам эффект, чтобы получить нужный результат. Выделяем слой с изображением косичек в панели шкалы времени, выбираем в меню «Distort» — «Wave War», что в переводе на русский — «Волновая деформация».
И видим уже на косичках появившейся эффект волны и появившиеся свойства эффектов у данного слоя.
Теперь этот эффект нужно подключить к амплитуде с помощью привязки. Для этого нужно выбрать у эффекта определённое свойство и привязать его к свойству «Slider» слоя амплитуды. Я предлагаю взять свойство «Wave height», т.е. высоту волны.
Вы можете поэксперементировать с другими свойствами, да и вообще с другими эффектами, которых очень много в стандартном наборе программы. Привязываем высоту волны к амплитуде и получаем эффект волны на косичках.
Я надеюсь, что достаточно доходчиво всё объяснил и вы теперь понимаете, как задать слою какой-нибудь эффект и подключить его к амплитуде трека. В видео-уроке вы можете посмотреть еще один вариант эквалайзера из изображения, с помощью параметра прозрачности.
Ну и теперь, чтобы сохранить результат, выбираем в верхнем меню «Composition» — «Add to Adobe Media Encoder Queue» и рендерим наше произведение в выбранную директорию, в формате mp4. Напомню, что для сохранения видео в MP4 у вас должна быть установлена программка Adobe media Encoder, без неё такой трюк не пройдёт.