Использование Web Audio API
YandexAudio API позволяет использовать функциональность Web Audio API при работе с аудиоплеером. Web Audio API — это высокоуровневая библиотека, предоставляющая расширенные возможности для работы со звуком в браузере. С помощью Web Audio API можно создать объемный звук, добавить эхо или, например, создать частотный эквалайзер. Подробнее см. в документации к Web Audio API.
Чтобы использовать возможности Web Audio API при работе с плеером, нужно вызвать метод toggleWebAudioAPI() с аргументом ‘true’:
В результате вызова функции toggleWebAudioAPI() будет создано необходимое окружение для работы Web Audio API — будет создан источник звука на основе HTML5-плеера, а также настроен модуль GainNode для установки итоговой громкости. На основе созданного окружения будет построен граф, удовлетворяющий следующей схеме (см. рис. 1):
Чтобы добавить в этот граф дополнительные модули, необходимо вызвать функцию setAudioPreprocessor(). В качестве аргумента данной функции следует передать объект, содержащий свойства:
Ниже приведен пример, демонстрирующий добавление в граф модуля DelayNode. Данный модуль позволяет задерживать звук на определенное время.
В результате выполнения этого кода будет сформирован новый граф, содержащий дополнительный модуль DelayNode :
Если в граф нужно добавить несколько модулей, то связь между ними необходимо настроить самостоятельно, используя функцию connect().
При вызове функции toggleWebAudioAPI() с аргументом ‘false’ все модули графа (в том числе GaneNode ) будут удалены и управление громкостью будет передано технологии HTML5 Audio.
Использование Audio API для создания вокодера
В прошлой статье мы немного познакомились с возможностями Audio API и написали простенький визуализатор сигнала. Теперь настало время копнуть поглубже и распробовать новые фишки API. Но нам нужна цель, к которой мы будем стремиться, и в данном случае нашей целью будет как следует поиздеваться над входящим сигналом и его характеристиками. Другими словами, мы напишем маленький вокодер.
Так как итоговый код получился довольно-таки большим, то в статье будет рассмотрены наиболее важные и интересные с точки зрения Audio API фрагменты. Итоговый результат вы конечно же сможете посмотреть на демке.
Выбор источника сигнала
Рассмотрим, что же тут происходит. В начале мы создаем audioContext для нашей страницы (что это такое описано в предыдущей статье), далее мы видим новую функцию BufferLoader. Она занимается тем, что при помощи XHR2 подтягивает внешние аудио-файлы и бережно складирует их в буфер. В нашем случае она нам потребуется, чтобы подтянуть один аудио эффект, который будет описан ниже. Функция эта не стандартная и нам придется её написать.
После подгрузки эффекта, мы захватываем аудио поток и, если пользователь нам это позволил, то нам необходимо будет связать захваченный сигнал с нашим audio — контекстом. Для этого мы воспользуемся ф-й createMediaStreamSource. Теперь наш входной сигнал в полном нашем распоряжении и, уж поверьте, мы знатно над ним поиздеваемся.
Обработка и изменение сигнала
Все значения, такие как громкость или значение, с которого начинается компрессия, можно привязать к пользовательскому интерфейсу, для изменения в реальном времени, как это сделано в демке. В результате пропускания сигнала через нашу функцию мы получим на выходе немного усиленную версию с эффектом эха (как если бы вы говорили с ведром на голове или в шлеме). Но принципиально нового звучания мы на выходе пока не получим, а это значит, что мы движемся дальше. Следующим шагом мы попробуем реализовать эффект кольцевой модуляции.
Кольцевая модуляция
Ну вот, совсем другое дело, после всего это мы получим уже довольно-таки замаскированный «роботизированный сигнал», но, как говорится, хорошего много не бывает, и поэтому мы добавим ко всему этому великолепию эквалайзер для ручной настройки различных частот, а реализовывать мы его будет при помощи уже знакомой нам ф-и createBiquadFilter с типом highshelf.
Фильтрация частот
Для начала создадим массив с настройками, по которым будем строить фильтры:
Параметрами в нем является уровень усиления и частота. Теперь ф-я, которая создает фильтры:
В результате ф-я преобразования примет вид:
Ну вот теперь мы имеем полноценный эквалайзер и можем усиливать или ослаблять любую частоту в сигнале. И если бы мы были «лалками», то остановились бы на достигнутом и со спокойной совестью мучили микрофон играясь с настройками, но мы же хотим большего. И вот тут мы, так сказать, добавим вишенку на торт — мы попробуем реализовать эффект под названием pitch shifter.
Изменение тональности
Суть эффекта заключается в том, что к сигналу добавляется его копия, которая отстает от основного тона на любой интервал в пределах двух октав вверх или вниз. Это очень модный эффект и его реализация чертовски сложна, так что мы сделаем, так сказать, упрощенную версию.
Для того, чтобы начать работу над этим эффектом, нам будет необходим интерфейс, который бы позволял получать данные сигнала, которые мы могли бы изменять.
Для его создания мы воспользуемся Дискретным преобразованием Фурье (а если быть точнее, то его разновидностью оконным преобразованием Фурье) и методом, знакомым нам по прошлой статье, createScriptProcessor. Он принимает три параметра: buffer(размер кадра или окна данных, которые выбираются из сигнала в единицу времени), numberOfInputChannels (кол-во входных каналов), numberOfOutputChannels(кол-во выходных каналов). Результатом вызова этого метода и станет создание объекта интерфейса, который нам нужен. Полученный объект имеет свое событие onaudioprocess, которое отрабатывает каждый раз, когда происходит новая выборка данных из сигнала. Итого, преобразование нашего сигнала будет выглядеть следующим образом:
Теперь, оперируя параметрами шага и перекрытия, мы можем получить эффект ускорения или замедления произношения. Для расчетов нам необходимо будет реализовать ф-и hannWindow (Ф-я расчета окна Ханна) и linearInterpolation(ф-я линейной интерполяции). Итоговый вариант нашей ф-и преобразования будет следующим:
Web Audio API
Общие концепции и использование Web Audio
Простой, типичный порядок действий выполнения манипуляций над аудио выглядит так :
Распределение времени контролируется с высокой точностью и низкими задержками, позволяя разработчикам писать код, что точно реагирует на события и в состоянии обработать образец даже на высокой оценке образцов (sample rate). Так что такие приложения как ритм-компьютер и программный автомат всегда под рукой.
Web audio API также даёт нам возможность контролировать то, каким аудио является в пространстве. Используя особую систему, что базируется
на модели source-listener, он позволяет контролировать модель панорамирования и обходиться без дистанционно-вызванного ослабления (distance-induced attenuation) или duppler shift, вызванного сдвигом источника (или сдвигом слушателя).
Помните: вы можете прочитать более детальный теоретический материал о Web audio API в нашей статье Basic concepts behind Web Audio API.
Web Audio API интерфейсы
В Web audio API есть всего 28 интерфейсов и соответствующих событий, которые мы сгруппировали в 9 категорий по функциональности.
Главные объекты определения аудио
Главные контейнеры и определения, что формируют аудио объект в Web Audio API.
Источники звука
Интерфейсы, которые определяют источники звука для использования в Web Audio API.
Аудио фильтры
Интерфейсы для определения эффектов которые можно применить к источникам звука.
Defining audio destinations
Once you are done processing your audio, these interfaces define where to output it.
Анализ и визуализация данных
If you want to extract time, frequency and other data from your audio, the AnalyserNode is what you need.
AnalyserNode The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.
Splitting and merging audio channels
To split and merge audio channels, you’ll use these interfaces.
ChannelSplitterNode (en-US) The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs. ChannelMergerNode (en-US) The ChannelMergerNode interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.
Audio spatialization
These interfaces allow you to add audio spatialization panning effects to your audio sources.
AudioListener (en-US) The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization. PannerNode The PannerNode interface represents the behavior of a signal in space. It is an AudioNode audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
Audio processing via JavaScript
If you want to use an external script to process your audio source, the below Node and events make it possible.
Note: As of the August 29 2014 Web Audio API spec publication, these features have been marked as deprecated, and are soon to be replaced by Audio_Workers.
Offline/background audio processing
It is possible to process/render an audio graph very quickly in the background — rendering it to an AudioBuffer rather than to the device’s speakers — with the following.
Audio Workers
Obsolete interfaces
The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.
Пример
This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the Voice-change-o-matic demo (also check out the full source code at Github) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!
The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.
5 библиотек с API для работы с HTML5 Audio
Сегодня мы хотели бы сделать небольшой обзор различных библиотек, которые используют HTML5 Audio API, а также более известный HTML5 Audio Element с более простым API.
Мы хотели бы показать вам некоторые из этих библиотек, для того чтобы вы могли ими воспользоваться в случае, если решите создать игру или приложение, которое включает в себя работу со звуком.
Некоторые демо, которые включают в себя какую-то из этих библиотек, довольно неплохие, и код для каждой из них прост и легок в работе.
1. Webaudiox.js
Webaudiox.js – это не совсем библиотека, а набор помощников в работе с Web Audio API. Он абсолютно независим и будет работать на любом браузере, который поддерживает Web Audio API.
Документация состоит из простого примера кода в форме газетного материала:
Как уже было сказано, для того, чтобы файл с помощниками webaudiox.js работал, он должен быть включенным. Для того, чтобы понять, как это работает, посмотрите analyser2canvas Helper. Этот помощник использует преимущества AnalyserNode Interface для того, чтобы делать визуализацию воспроизводимого звука в режиме реального времени.
У webaudiox.js GitHub repo есть много различных примеров, которые можно попробовать в действии. Но, конечно, ваш браузер должен поддерживать Web Audio API. Этот набор помощников не является полизаполнением, поэтому браузер с более поздней поддержкой не будет лучшей идеей, если только вы не хотите объединить его с другим скриптом, библиотекой или ресурсом.
По нашему мнению, webaudiox.js – отличный выбор для работы с HTML5 играми.
2. Howler.js
Howler.js рекламируется просто как «библиотека аудио JavaScript для современной сети», которая возвращается к Web Audio API и отходит от аудио HTML5.
У этой библиотеки достаточно обширные возможности, вот некоторые из них:
Описание на официальном сайте включает в себя некоторое количество demo, показывающие возможности программы, поэтому советуем ват туда заглянуть.
Обратите внимание на пример так называемого «спрайтового звука», где вы найдете местонахождение разных звуков в одном звуковом файле.
API имеет красивый, чистый вид и создает такое впечатление, что работать с ним не составит особого труда. Поскольку используется новый Web Audio API, поддержка браузера соответствующая.
Авторы библиотек описывают это как «отлично подходящая для игр», но она также хороша для любого другого веб-приложения.
3. Pedalboard.js
Как и предыдущие библиотеки, Pedalboard.js использует Web Audio API, но на этот раз он используется для создания звуковых эффектов на аудио источниках, базируется на звуковых эффектах гитары.
Проще говоря, вы можете создать свою рабочую панель и управлять гитарными звуками. Ярким примером является Pedals.io «эффект гитары в облаке»:
Синтаксис для API ориентирован на объект, поэтому он достаточно чист и прост в использовании. Вот пример:
Этот код построен на объекте «stage», содержащим «board», который, в свою очередь, содержит «pedals», с помощью чего создаются желаемые эффекты.
Следует признать, что эта библиотека не обязательно будет самой полезной для создания игр и других приложений, но при креативном подходе можно придумать интересный материал. Эта библиотека работает в любом браузере, поддерживающем Web Audio API.
Если вам понравится эта библиотека, вы можете посмотреть, как работает Band.js, «композитор» API, поддерживающий ритмы, большое количество инструментов, секции воспроизведений и сложные музыкальные размеры.
4. Wad
Wad предназначен для Web Audio DAW (Digital Audio Workstation) и описывается как «jQuery для ваших ушей». Эта библиотека упрощает работу с аудио, используя Web Audio API.
Вот пример кода, где написан трек пианино, с использованием «квадратной» волны:
Повторимся, что это достаточно чистый API с большим количеством возможностей. Вы можете протестировать вышенаписанный код с некоторыми другими примерами (барабан, флейта) на демо странице.
Есть такие особенности как установка стереопозиции, 3D установка, фильтры, реверберация, вход микрофона и способность включать эффекты из внешних библиотек.
Но есть один недостаток в этой библиотеке: она не работает в Firefox, и в описании авторы это упоминают.
5. Fifer
Fifer – это «микро лаборатория» для HTML5 Audio API, которая работает с лайт версией Flash на более старых браузерах.
Код включает в себя простые и образующие цепь методы для работы с играми и другими приложениями.
Некоторые особенности API:
Эта библиотека довольно простая, она могла бы быть хорошим инструментом в работе над большими проектами. Большой плюс – она перейдет на Flash, если Web Audio API будет недоступен.
И обратите внимание, что этот API основан на HTML5 audio, а не на Web Audio API, так что есть поддержка IE9 для HTML5, IE8 и ранней версии Flash.
У repo есть простой пример, который вы можете просмотреть здесь. Ничего особенного, просто ударный звук в формате MP3 с отступлением к SWF.
Ресурсы Web Audio API
Все библиотеки, которые мы с вами разобрали, позволяют вам пользоваться возможностями Web Audio API без необходимости копаться слишком глубоко, чтобы достать хороший звук, обеспечивающий хороший, чистый API.
Если вы хотите изучить API и создавать свои собственные произведения, советуем вам заглянуть в книгу Бориса Смус (Boris Smus) Web Audio API от O’Reilly, которая доступна он-лайн с версией для печати.
Также, есть введение в Web Audio на HTML5 Rocks и документ на тему MDN.
Поддержка браузера
Если библиотека, которую вы выбрали, использует HTML5 Audio, то она поддерживается на всех браузерах, включая IE9+. Но если библиотека использует Web Audio API, то она будет работать не на всех браузерах.
Нет поддержки некоторых мобильных браузеров, а Safari требует разрешение от продавца. Плохая новость – ни одна версия IE не поддерживает Web Audio API, даже IE11. Это нерешенный вопрос команды IE, который, мы надеемся, скоро будет решен.
HTML5 Audio — cостояние дел. Часть 1
Как же нам начать? Есть несколько понятий, которые надо освоить для подготовки. Давайте сначала разберёмся в типах MIME.
■ Типы MIME
● Серверная часть
Их называют ещё интернет медиа-типами — это один из способов сделать так, чтобы ваша система знала, как работать с медиаданными.
Прежде всего, сервер должен быть настроен для правильной поддержки MIME-типов. В случае Apache это означает, что в .htaccess имеются строки:
| Совет : Не делайте gzip-сжатие медиафайлов на сервере. Большинство форматов уже сжаты, и есть некоторая поддержка для остальных. Кроме того, в запасном решении с флешем, он не поддерживает сжатия медиаданных. |
● Клиентская часть
При описании источников данных в коде или разметке можно указать MIME-тип, который позволит браузеру определить данные правильно.
Самый надежный способ описать аудио HTML5 — примерно такой:
Здесь определяется тег и используемые источники данных. Браузер выберет только один — он не будет проигрывать их два или больше. В этом же коде размещаются резервные варианты обработки.
Вместе с адресом данных в атрибуте src указан атрибут type. Он не обязателен, но помогает браузеру узнать MIME-тип и кодеки для отдаваемого файла до того как он его загрузит. Если его нет, браузер пытается узнать тип из файла возможными способами.
| Замечание : можно пропустить в атрибуте название кодека, но для надежности и эффективности я рекомендую помогать браузеру, давая максимум возможной информации. |
Отлично. Теперь мы знаем, как определить адрес файла, и браузер преспокойно выберет первый поддерживаемый им формат. А можем ли мы подать файл динамически?
● Заранее узнать тип аудио поможет .canPlayType (наверное)
Если объект Audio описывается в HTML, доступ к объекту можно получить через DOM:
или, если определён id,
Как вариант, объект создаётся полностью на Javascript.
Если есть объект Audio, то есть доступ к его методам и свойствам. Для проверки поддержки форматов используют метод canPlayType с параметром — текстовым значением MIME-типа.
Можно даже явно указать кодек:
canPlayType возвращает одно из 3 значений:
1) probably,
2) maybe, или
3) «» (пустая строка).
Смысл получения этих странных типов истекает из общей странности ситуации, в которой находятся кодеки, пока мы судим о них по типу. Без реальной попытки воспроизведения браузер может только догадываться о применимости кодека.
Итого, для проверки поддержки делаем:
■ Поддержка различных кодеков в браузере
Посмотрим, как поддерживаются кодеки в современных браузерах.
Кодеки десктопных браузеров:
| Десктопные версии | Номер | Поддержка кодеков |
|---|---|---|
| Internet Explorer | 9.0+ | MP3, AAC |
| Chrome | 6.0+ | Ogg Vorbis, MP3, WAV (начиная с Chrome 9) |
| Firefox | 3.6+ | Ogg Vorbis, WAV |
| Safari | 5.0+ | MP3, AAC, WAV |
| Opera | 10.0+ | Ogg Vorbis, WAV |
Кодеки мобильных:
| Мобильные браузеры | Версия | Поддержка кодеков |
|---|---|---|
| Opera Mobile | 11.0+ | Device-dependent |
| Android | 2.3+ | Device-dependent |
| Mobile Safari | (iPhone, iPad, iPod Touch) iOS 3.0+ | MP3, AAC |
| Blackberry | 6.0+ | MP3, AAC |
Хорошая новость — в том, что на момент написания статьи около 80% браузеров поддерживают HTML5 Audio.
● Контейнеры, форматы и расширения файлов (и снова эти MIME-типы)
● Мы имеем и не боимся его использовать!
Несколько самых используемых атрибутов:
| Свойство | Описание | Возвращаемое значение |
|---|---|---|
| currentTime | позиция курсора проигрывателя | double (секунды) |
| duration | длительность воспроизведения | double (секунды); только чтение |
| muted | заглушен ли звук | boolean |
| paused | остановлено ли воспроизведение | boolean |
| volume | уровень громкости | double (от 0 до 1) |
Использовать их крайне просто. Например:
Переменной duration присвоено значение длительности (в секундах) аудиоклипа.
■ Буферизация, поиск и временны́е диапазоны
Ситуация на этом фронте улучшается, разработчики браузеров начинают делать основную часть спецификации.
API даёт нам атрибуты buffered и seekable, когда хотим узнать, какая часть медиафайла была буферизована или предзагружена для воспроизведения без задержек. Они оба возвращают объект TimeRanges, который есть список интервалов — числа начала и конца.
● Атрибут buffered
Возвращает интервалы полностью загруженных участков файла. Небольшой пример:
● Объект TimeRanges
The TimeRanges object contains data on the parts on buffered media in the form of one or more — you guessed it — time ranges. A TimeRanges object consists of these properties:
Содержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) и имеет свойства:
length — число интервалов,
start(index) — начальное время указанного интервала,
end(index) — конечное время указанного интервала
(отсчитывается от начала воспроизведения).
| Забавно : По умолчанию размерность времени в JS Audio API — секунды, хотя традиционные функции в JS используют миллисекунды. |
Таким образом, в этом примере:
В каких случаях может быть больше одного буферизованного интервала? Пользователь кликает впереди, на небуферизованном участке шкалы на блоке проигрывателя. Объект начинает новую буферизацию от точки клика, и возникают 2 интервала буферизации.
| Совет : Большинство аудио-проигрывателей позволяет перемещаться на новые позиции файла во время загрузки, выполняя ряд запросов на сервер. В Apache множественный доступ к файлу разрешён по умолчанию, но надо убедиться в этом для сервера с неизвестными настройками. |
Заметим, что если пользователь активно переключает точку воспроизведения, буферизация имеет мало смысла. Некоторые браузеры могут прочитать конец файла, чтобы установить длительность записи, почти сразу создавая 2 интервала буфера. Поэтому прогресс-бар в проигрывателе несколько сложнее обычного контрола прогресс-бара с 1 интервалом.
Вы можете проверить TimeRanges вашего браузера с помощью этого удобного HTML5 Media Event Inspector.
● Атрибуты seeking и seekable
Поиск в контексте медиафайла — это заглядывание вперёд или назад в медиафайл. Обычно это происходит, когда ещё не закончена полная буферизация файла. Атрибут seeking используется для указания на то, что призошло событие «seeked«. true означает, что часть файла ещё не загружена.
Примечание на сайте оригинала, html5doctor.com :
Эта статья написана Марком Боасом. Марк разрабатывает / преподает / описывает и продвигает новые и открытые веб-технологии. Сооснователь Happyworm — небольшой вебстудии, разрабатывающей, в частности, jPlayer Media Framework, он раздвигает возможности браузера с помощью HTML5 и JavaScript. Будучи универсалом в сердце, Марк большую часть времени занимается веб-медиа и протоколами реального времени. Любитель всего, относящегося к аудио, он сейчас страстно работает над задачей «сделать что-то новое» в его экспериментах в проекте Hyperaudio. Вы можете следить за твиттером Марка.
Содержание следующей части:
 ● Замечание о предзагрузке
 ● Успешно воспроизведённое
■ Медиа-события
■ Потоковое воспроизведение
■ Эволюция спецификаций (или «Вау, это дело движется!»)
● Метод load
● Когда браузеры вернутся к официальной документации?
 ● Автовоспроизведение и громкость
 ● Одновременное воспроизведение нескольких аудиотегов
 ● Зависимость от ОС
■ Что нового?
 ● Изменение шага
 ● Медиа-фрагменты
■ Расширенное аудио API: будущий звук в браузерах
■ Заключение
■ Литература
