Web audio api что это
Использование 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.
Первые шаги с Web Audio API
В этом кратком введении вы узнаете об аудиоконтексте Web Audio API и способности экземпляров AudioContext создавать простые генераторы, которые могут быть использованы для преобразования вашего браузера в ретро-синтезатор!
Примеры коды были протестированы в Chrome, но вы, вероятно, можете следовать за ним, используя консоль инструментов разработчика вашего любимого браузера.
Перед тем как начать
Как уже упоминалось, поддержка Web Audio API не является универсальной, поэтому лучше проверить, что API доступен в браузере пользователя:
После этой простой проверки мы можем использовать функциональность Web Audio API.
Немного про AudioContext
Простой генератор
Чтобы узнать, какие звуки он может генерировать самостоятельно, давайте использовать audioContext для создания OscillatorNode:
API веб-аудио пытается имитировать аналоговую цепочку сигналов. Мы подключаем наш входной сигнал (генератор) к цифровому усилителю мощности (audioContext), который затем передает сигнал на динамики.
Давайте запустим наш генератор:
Вы должны услышать звук, сопоставимый с гудком. Поздравляем, вы создаете музыку с помощью Web Audio API! Конечно, никто не хочет слышать один и тот же звук. Вы можете остановить наш генератор таким образом:
Как только AudioNode остановлен, его нельзя запустить снова! Для возобновления воспроизведения необходимо создать новый AudioNode.
Методы start и stop принимают один параметр типа number. Значение параметра используется для планирования событий запуска / остановки:
Управление звуком с помощью AudioParams
Регистрируя объект oscillator, мы получаем что-то вроде этого (конкретные значения свойств опущены, поскольку они могут быть разными в зависимости от устройства / браузера):
Значение frequency нашего генератора реализует интерфейс AudioParam. Звуком AudioNode, можно манипулировать с помощью его свойств AudioParam. Однако прямое переназначение свойства значения AudioParam устарело в пользу вспомогательных методов.
Если мы хотим, чтобы наш oscillator излучал «Bb» вместо «A», мы должны сделать что-то вроде этого:
Бонус: настройка периодической формы сигнала
Наш oscillator использует периодический сигнал, чтобы излучать его тон. Форма волны представлена свойством типа интерфейса OscillatorNode. По умолчанию тип «sine». Большинство браузеров поддерживают как минимум три других варианта: «sawtooth», «triangle» и «square». Таким образом, изменение «тона» нашего генератора так же проста, как:
Вывод
Создание и управление аудио в браузере проще, чем когда-либо, благодаря Web Audio API. С его помощью веб-разработчики могут воссоздавать ретро-сигналы в 3-5 строчек кода.
Пробуем Audio API на примере написания визуализатора
Web Audio API для меня является одной из тех новинок, которыми сейчас напичканы браузеры и с которой хотелось подружиться поближе и хоть как-то проникнуться тем, что же можно с помощью этого натворить. Что бы проникнуться, я решил написать простенький визуализатор аудио.
Но прежде чем начать разбираться непосредственно с Audio API, нам необходимо набросать заготовку нашего визуализатора и делать мы будем это при помощи canvas.
Создание заготовки
Итак создаем холст:
Отлично, холст у нас есть и далее нам надо создать элементы, которые и будут отвечать за визуализацию звукового сигнала. В нашем случае это будут обычные круги:
Функция draw, которая будет рисовать наши круги, выглядит следующим образом:
Собственно, наша заготовка практически готова, остался только конструктор частицы Particle.
Создаем анализатор
Итак, у нас есть все, чтобы начать писать визуализатор. Главную роль будет играть понятие AudioContext. У одной страницы может быть только один контекст, но этого вполне достаточно, чтобы реализовать все, что вашей душе угодно. Практически все методы для создания модулей являются методами AudioContext. Полный их список можно посмотреть тут. Так как спецификация AudioContext до конца еще не одобрена, то создавать мы его будет вот таким образом:
Этого достаточно, чтобы создать AudioContext в Opera, Chrome и Firefox. От созданного нами контекста нам понадобятся следующие методы:
Итак, используя то, что мы выяснили по поводу AudioContext, набросаем конструктор нашего анализатора:
Эта ф-я при вызове создаст нам аудио контекст и интерфейс для анализа данных. Тут видно, что при создании анализатора мы устанавливаем значения для параметров smoothingTimeConstant — частота опроса с которой анализатор будет требовать данные и fftSize — размерность преобразования Фурье (грубо говоря, этот параметр указывает, сколько данных мы хотим получить в результате частотного анализа сигнала, это кол-во будет равно fftSize/2). Функцию Uint8Array мы используем для создания массива с четким указанием границ, в нашем случае его длина будет равна 256.
Пока в массиве у нас шаром покати, но это и не удивительно, ведь нет источника сигнала, который надо анализировать. Добавим в наш конструктор создание audio — элемента, а заодно и подпишемся на событие canplay для него, которое возникает, когда браузер считает, что получил достаточно данных для того, чтобы начать воспроизведение. С учетом этого наш конструктор примет вид:
Нам осталось отправить наш созданный аудио поток в AudioContext и связать анализатор с источником и приемником. Сделать это довольно легко, ведь умные люди, которые создавали Web Audio API, позаботились об этом и благодаря им у каждого audio — модуля есть метод connect, который в качестве параметра принимает значение, к которому и надо присоединиться. Итого, конечный вид будет таким:
Тут стоит упомянуть о AudioContext.destination — это системный звуковой выход по умолчанию (обычно это колонки). Метод getByteFrequencyData — этот метод получает данные от анализатора и копирует их в переданный массив, который мы в итоге и возвращаем, благодаря великой магии замыканий.
Допишем в нашу функцию createParticles создание анализатора, в итоге получим:
Вот и все, мы получили свой простенький визуализатор и немного приоткрыли завесу над Web Audio API. Вся эта прелесть будет работать в Chrome, Opera, Firefox. IE, как и всегда, остается за бортом.
Немного более навороченная демка, в которой использовался данный код: demo
Код демки на github: Analyser
Код на codepen: Analyser
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.
Web audio api что это
У Web Audio API стоит выделить 3 основных аспекта, которые особо не пересекаются и их можно рассматривать отдельно:
В этой статье я постараюсь объяснить назначение каждого элемента. Она получается и так достаточно большой, так что большую часть информации об интерфейсах я опустил (она доступна по ссылкам на документацию), а основное внимание сосредоточил на вещах, которые не очевидны после прочтения документации.
Работа с Web Audio API
Как уже стало понятно из предыдущего абзаца, элементы Web Audio API связываются в некий граф, в котором определен порядок передачи сигнала от отного элемента другому. Все элементы, связываемые таким образом, являются потомками класса AudioNode (man)
Также стоит отдельно рассмотреть 2 элемента, которые позволяют разделять и объединять каналы:
Стоит отдельно упомянуть про работу с многоканальным звуком. Каждый элемент AudioNode имеет свои параметры, указывающие на количество каналов, с которыми он работает и то, каким образом данные каналы следует интерпретировать.
Рассказывая про работу с каналами, нельзя не упомянуть про StereoPannerNode (man), который позволяет регулировать баланс каналов. Данный элемент позволяет усиливать звук в одном канале, одновременно ослабляя его в другом канале.
Web Audio API работает с цифровыми сигналами, которые могут быть получены из самых разных источников или созданы непосредственно с помощью скриптов. Элементы Web Audio API, которые могут генерировать некий сигнал, будем называть источниками сигнала, а любые посторониие объекты, которые могут быть использованы для генерации этого сигнала, будем называть источниками данных.
В отличие от медиа-элементов у Web Audio API нет методов получения данных по сети или из файловой системы. Вместо этого есть 3 типа источников данных, которые позволяют решать проблему получения данных самыми разнообразными способами, которые не доступны медиа-элементам.
Начнем с самого простого. Источником данных этого элемента является или элемент.
Стоит отметить 3 вещи:
Посмотреть реализацию можно тут
Источником данных этого элемента является аудиовход или любой другой источник, настроенный в системе или браузере пользователя.
Источником данных этого элемента является AudioBuffer. Это, пожалуй, самый интересный тип источников сигнала, т.к. он предоставляет те возможности, которые отсутсвуют у медиа-элементов. С помощью аудиобуфера можно формировать любой сигнал непосредственно в браузере (например, таким образом это делается здесь wavepot.com).
Непосредственное создание и заполнение буфера
Буфер может иметь до 32 каналов. Каждый канал содержит информацию о сигнале в формате PCM.
Декодирование сжатых аудиоданных
Также можно создать буфер из сжатых аудиоданных. Для этого используется метод AudioContext#decodeAudioData (man). Он принимает 2 параметра:
Данный элемент позволяет произвести необходимые преобразования звука заранее, а затем многократно переиспользовать полученный аудиобуфер вместо повторных вычислений в рантайме. Возможности по формированию и обработке сигнала в данном случае ограничены только воображением.
Кстати, AudioNode привязывается к контексту, в котором был создан. Нельзя объединять ноды, созданные в разных контекстах. OfflineAudioContext является отдельным контекстом, так что для него нужны отдельные обрабатывающие ноды.
Фабрика AudioContext#createPeriodicWave (man) принимает 3 аргумента:
Стоит учитывать, однако, что вне зависимости от количеста коэффициентов, которые будут переданы в фабрику, общее количество отсчетов, которое будет использовано для обратного преобразования, будет равно 4096.
Для анализа данных аудиопотока можно использовать 2 различных подхода:
Я не буду здесь расписывать, каким образом можно использовать данные аудиобуфера, т.к. это не относится к Web Audio API напрямую. Получить данные любого канала можно с помощью методов AudioBuffer#getChannelData (man) и AudioBuffer#copyFromChannel (man).
Данный элемент используется для анализа данных аудиопотока в реальном времени. Он содержит в себе буфер данных, который заполняется по мере воспроизведения потока, т.е. содержит текущее окно преобразования. К этому буферу применяется Быстрое Преобразование Фурье. Данные преобразования можно получить с помощью методов:
Данные анализируемого буфера можно получить с помощью методов:
Быстрое Преобразование Фурье
В статье про теорию звука я постарался избежать описания данного алгоритма, но здесь стоит о нем рассказать, чтобы было понятно, для чего он нужен и какие данные с помощью него можно получить.
Быстрым Преобразованим Фурье (БПФ) называется семейство алгоритмов, позволяющих выполнять Дискретное Преобразование Фурье (ДПФ) значительно быстрее. Дискретное Преобразование Фурье в свою очередь позволяет для последовательности отсчетов сигнала получить набор частотных и фазовых характеристик этого сигнала в виде набора комплексных чисел. Вообще говоря, это преобразование над комплексными числами, но в цифровом сигнале у нас есть только вещественная часть, и все мнимые компоненты будут равны нулю.
Вещественная часть самого первого аргумента всего лишь поднимает/опускает вещественную часть в результирующей функции. Мнимая часть делает то же самое с мнимой частью функции.
Таким образом, если обратное ДПФ из коэффициентов строит цифровой сигнал, то прямое ДПФ из цифрового сигнала получает эти самые коэффициенты, т.е. позволяет разложить наш сигнал в набор синусоид различной частоты. Возьмем к примеру сигнал, состоящий из 2х синусоид: 
.
Интерпретация данных AnalyzerNode
Как я уже упомянал выше, ноду можно подключить не только к другой ноде, но и к некому параметру. В данном случае значение сигнала будет прибавляться к собственному значению данного параметра. Таким образом можно, например, смоделировать частотную модуляцию сигнала (jsbin)
Биквадратный фильтр относится к классу фильтров с бесконечной импульсной характеристикой (БИХ), он использует 2 последних отсчета из входного сигнала, 2 последних отсчета из выходного сигнала и текущий уровень сигнала. Эти параметры умножаются на зарнее рассчитанные коэффициенты и складываются. С помощью различных коэффициентов реализуется большое количество разнообразных фильтров. Данный тип фильтров лучше всего подходит, например, для создания эквалайзера.
*Рис. 2. Фильтр lowpass.*
Пропускает только частоты ниже заданной частоты. Фильтр задается частотой и добротностью.
*Рис. 3. Фильтр highpass.*
Действует аналогично lowpass, за исключением того, что он пропускает частоты выше заданной, а не ниже.
*Рис. 4. Фильтр bandpass.*
*Рис. 5. Фильтр notch.*
*Рис. 6. Фильтр lowshelf.*
*Рис. 7. Фильтр highshelf.*
*Рис. 8. Фильтр peaking.*
*Рис. 9. Фильтр allpass.*
Как я уже говорил в статье про теорию звука, данный фильтр может применяться для создания таких эффектов, как «дисторшн», «овердрайв» и «фузз». Этот фильтр применяет к входному сигналу специальную формирующую функцию. Конкретно данная реализация этого фильтра использует не функцию, а таблицу соответствия (табулированную функцию). Каждому значению входного уровня сигнала сопоставляется некое значение из этой таблицы (интерполированное). С помощью такой таблицы можно добиться появления новых гармоник в сигнале, за счет чего и работают перечисленные выше эффекты. При этом новые гармоники могут иметь частоты выше, чем частоты, присутствующие в изначальном сигнале, это может привести к появлению алиасов. Для компенсации данного эффекта в фильтре предусмотрена возможность повышения частоты дискретизации на время расчетов. Перед применением фильтра частота дискретизации повышается в указанное количество раз, применяется данный фильтр, затем фильтруются высокие частоты (с частотой выше частоты Найквиста для исходного сигнала) и частота снижается обратно.
Неплохое видео про Waveshaper, в котором можно не только посмотреть на то, как меняется форма волны в зависимости от формирующей функции, но и послушать результат:
Фильтр, производящий линейную свертку входного сигнала с аудиобуфером, задающим некую импульсную характеристику. Свертка аудиопотока c заданной импульсной характеристикой как бы накладывает эффекты окружения, в котором была снята импульсная характеристика на входной сигнал.
Данный фильтр реализует эффект реверберации. Существует множество библиотек готовых аудиобуферов для данного фильтра, которые реализуют различные эффекты (1, 2), подобные библиотеки хорошо находятся по запросу impulse response mp3.
Фильтр задается целым рядом различных параметров:
При применении данного фильтра следует учитывать, что он значительно ухудшает звучание музыкальных композиций в большинстве случаев, особенно если выставлена высокая скорость срабатывания и низкий порог сглаживания.
Данный API является заменой устаревшей версии JavaScriptNode и является как устаревшим с 29 августа 2014. Вместо него должно быть вскоре (sic!) реализовано API Audio Worker’ов, но его по-прежнему нет ни в одном браузере (по информации на 8 декабря 2015). Поэтому я опишу, что это такое и как оно работает, т.к. альтернативы нет и неизвестно, когда она появится.
Фабрика AudioContext#createScriptProcessor (man) принимает 3 параметра: размер буферов для входных и выходных данных, количество каналов входного сигнала, количество каналов выходного сигнала.
Данный элемент представляет из себя источник звука в 3х-мерном пространстве. Можно задавать следующие настройки:
Кроме данных параметров каждый источник должен иметь некую позицию и ориентацию в пространстве. Эти параметры задаются с помощью методов:
Плюс к тому, AudioListener имеет настройки для расчета эффекта Доплера:
Стоит отметить, что метод AudioListener#setPosition(x, y, z) и свойства AudioListener#speedOfSound и AudioListener#dopplerFactor в настоящий момент значатся как устаревшие в связи с большим количеством проблем в реализации расчетов эффекта Доплера. Судя по всему в дальнейшем расчет эффекта Доплера собираются вовсе убрать из Web Audio API (по крайней мере я не нашел методов, которыми заменят данную функциональность).