настройки api аудио что это

Пробуем 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 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 строчек кода.

Источник

Концепции, лежащие в основе Web Audio API

Доброго времени суток, друзья!

В этой статье объясняются некоторые концепции из теории музыки, на основе которых работает Web Audio API (WAA). Зная эти концепции, вы сможете принимать взвешенные решения при проектировании аудио в приложении. Статья не сделает вас опытным инженером по звуку, но поможет понять, почему WAA работает так, как работает.

Аудио схема

Суть WAA заключается в выполнении некоторых операций со звуком внутри аудио контекста (audio context). Этот API был специально разработан для модульной маршрутизации (modular routing). Основные операции со звуком представляют собой узлы (audio nodes), связанные между собой и формирующие схему маршрутизации (audio routing graph). Несколько источников — с разными типами каналов — обрабатываются внутри единого контекста. Такая модульная схема обеспечивает необходимую гибкость для создания сложных функций с динамическими эффектами.

Аудио узлы связаны между собой через входы и выходы, формируют цепь, которая начинается от одного или нескольких источников, проходит через один или несколько узлов, и заканчивается в пункте назначения (destination). В принципе, можно обойтись и без пункта назначения, например, если мы хотим просто визуализировать некоторые аудио данные. Типичный рабочий процесс для веб аудио выглядит примерно так:

Обозначение канала

Количество доступных аудио каналов часто обозначается в числовом формате, например, 2.0 или 5.1. Это называется обозначением канала. Первая цифра означает полный диапазон частот, которые включает сигнал. Вторая цифра означает количество каналов, зарезервированных для выходов низкочастотного эффекта — сабвуферов.

Каждый вход или выход состоит из одного или более каналов, построенных по определенной аудио схеме. Существуют различные дискретные структуры каналов, такие как моно, стерео, квадро, 5.1 и т.д.

Аудио источники могут быть получены разными способами. Звук может быть:

Аудио данные: что находится в семпле

Семплирование означает преобразование непрерывного сигнала в дискретный (разделенный) (аналогового сигнала в цифровой). Другими словами, непрерывная звуковая волна, такая как живой концерт, преобразуется в последовательность семплов, что позволяет компьютеру обрабатывать аудио отдельными блоками.

Аудио буфер: кадры, семплы и каналы

AudioBuffer в качестве параметров принимает количество каналов (1 для моно, 2 для стерео и т.д.), длину — количество кадров семпла внутри буфера, и частоту дискретизации — количество кадров в секунду.

Семпл — это простое 32-битное значение с плавающей точкой (float32), представляющее собой значение аудио потока в конкретный момент времени и в конкретном канале (левый или правый и др.). Кадр или кадр семпла — это набор значений всех каналов, воспроизводимых в определенный момент времени: все семплы всех каналов, воспроизводимые в одно и тоже время (два для стерео, шесть для 5.1 и т.д.).

Частота дискретизации — это количество семплов (или кадров, поскольку все семплы кадра проигрываются в одно время), воспроизводимые за одну секунду, измеряется в герцах (Гц). Чем выше частота, тем лучше качество звука.

Давайте посмотрим на моно и стерео буферы, каждый длиной в одну секунду, воспроизводимые с частотой 44100 Гц:

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

Заметка: чтобы получить время в секундах из количества кадров необходимо разделить количество кадров на частоту дискретизации. Чтобы получить количество кадров из количества семплов, делим последние на количество каналов.

Заметка: в цифровом аудио 44100 Гц или 44.1 кГц — это стандартная частота семплирования. Но почему 44.1 кГц?

Во-первых, потому что диапазон слышимых частот (частот, различимых человеческим ухом) варьируется от 20 до 20000 Гц. Согласно теореме Котельникова частота дискретизации должна более чем в два раза превышать наибольшую частоту в спектре сигнала. Поэтому частота семплирования должна быть больше 40 кГц.

Во-вторых, сигналы должны быть отфильтрованы с помощью фильтра нижних частот перед семплированием, в противном случае будет иметь место наложение спектральных «хвостов» (подмена частот, маскировка частот, алиасинг) и форма восстановленного сигнала будет искажена. В идеале, фильтр нижних частот должен пропускать частоты ниже 20 кГц (без ослабления) и отбрасывать частоты выше 20 кГЦ. На практике требуется некоторая переходная полоса (между полосой пропускания и полосой подавления), где частоты частично ослабляются. Более легким и экономичным способом это сделать является применение противоподменного фильтра. Для частоты дискретизации равной 44.1 кГц переходная полоса составляет 2.05 кГц.

В приведенном примере мы получим стерео буфер с двумя каналами, воспроизводимый в аудио контексте с частотой 44100 Гц (стандарт), длиной 0.5 секунды (22050 кадров / 44100 Гц = 0.5 с).

В данном случае мы получим моно буфер с одним каналом, воспроизводимый в аудио контексте с частотой 44100 Гц, произойдет его передискретизация до 44100 Гц (и увеличение кадров до 44100), длиной 1 секунда (44100 кадров / 44100 Гц = 1 с).

Заметка: аудио передискретизация («ресемплирование») очень похоже на изменение размеров («ресайзинг») изображений. Допустим, у нас есть изображение размером 16х16, однако мы хотим заполнить этим изображением область размером 32х32. Мы делаем ресайзинг. Результат будет менее качественным (может быть размытым или рваным в зависимости от алгоритма увеличения), но это работает. Ресемплированное аудио — это тоже самое: мы сохраняем пространство, но на практике едва ли получится добиться высокого качества звучания.

Планарные и чередующиеся буферы

В WAA используется планарный формат буфера. Левый и правый каналы взаимодействуют следующим образом:

В данном случае каждый канал работает независимо от других.

Альтернативой является использование чередующегося формата:

Такой формат часто используется для декодирования MP3.

В WAA используется только планарный формат, поскольку он лучше подходит для обработки звука. Планарный формат преобразуется в чередующийся, когда данные отправляются на звуковую карту для воспроизведения. При декодировании MP3 происходит обратное преобразование.

Аудио каналы

Смешивание вверх (up-mixing) и вниз (down-mixing)

Визуализация

Визуализация зиждется на получении выходных аудио данных, таких как данные об амплитуде или частоте, и их последующей обработке с помощью каких-либо графических технологий. В WAA имеется AnalyzerNode (анализатор), который не искажает проходящий через него сигнал. При этом он способен извлекать данные из аудио и передавать их дальше, например, в &ltcanvas>.

Для извлечения данных могут быть использованы следующие методы:

Спатиализация

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

Позиция паннера описывается с помощью правосторонних картезианских координат; для движения используется вектор скорости, необходимый для создания эффекта Доплера, для направления используется конус направленности. Этот конус может быть очень большим в случае разнонаправленных источников звука.

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

Соединение и разветвление

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

Разветвление представляет собой обратный процесс (осуществляется посредством ChannelSplitterNode).

Пример работы с WAA можно посмотреть здесь. Исходный код примера находится здесь. Вот статья про то, как все это работает.

Источник

Звуковой отпечаток компьютера через AudioContext API

Компании, отслеживающие действия пользователей в интернете, нуждаются в надёжной идентификации каждого человека без его ведома. Фингерпринтинг через браузер подходит идеально. Никто не заметит, если веб-страница попросит отрисовать фрагмент графики через canvas или сгенерирует звуковой сигнал нулевой громкости, замеряя параметры ответа.

Метод работает по умолчанию во всех браузерах, кроме Tor. Он не требует получения никаких разрешений пользователя.

Тотальный трекинг

Недавно журналистка NY Times Кашмир Хилл обнаружила, что некая малоизвестная компания Sift накопила на неё досье объёмом 400 страниц. Там список покупок за несколько лет, все сообщения хостам на Airbnb, лог запусков кошелька Coinbase на мобильном телефоне, IP-адреса, заказы пиццы с iPhone и многое другое. Аналогичный сбор ведут несколько скоринговых фирм. Они учитывают до 16 000 факторов при составлении «рейтинга доверия» каждого пользователя. Трекеры Sift установлены на 34 000 сайтов и мобильных приложений.

Поскольку следящие куки и скрипты не всегда хорошо работают или отключены у клиента, трекинг пользователей дополняют фингерпринтингом — это набор методов для получения уникального «отпечатка» браузера/системы. Список установленных шрифтов, плагинов, разрешение экрана и другие параметры в сумме дают достаточно бит информации для получения уникального ID. Хорошо работает фингерпринтинг через canvas.

Фингерпринтинг через Canvas API

Веб-страница отправляет браузеру команду отрисовать графический объект из нескольких элементов.

Результат выглядит примерно так:

Функция Canvas API под названием toDataURL() возвращает URI с данными, которые соответствуют этому результату:

Этот URI отличается на разных системах. Затем он хэшируется и используется вместе с другими битами данных, которые составляют уникальный отпечаток системы. Среди прочего:

Недавно в дополнение к набору параметров добавился ещё один: звуковой отпечаток через AudioContext API.

Ещё в 2016 году этот метод идентификации уже использовали сотни сайтов, такие как Expedia, Hotels.com и др.

Фингерпринтинг через AudioContext API

Алгоритм действий такой же: браузер выполняет задачу, а мы записываем результат выполнения и вычисляем уникальный хэш (отпечаток), только в данном случае данные извлекаются из аудиостека. Вместо Canvas API идёт обращение к AudioContext API, это интерфейс Web Audio API, который поддерживают все современные браузеры.

Браузер генерирует низкочастотный аудиосигнал, который обрабатывается с учётом звуковых настроек и оборудования, установленного на устройстве. При этом никакой звук не записывается и не воспроизводится. Колонки и микрофон не задействуются.

Преимущество этого метода фингерпринтинга в том, что он независим от браузера, так что позволяет отслеживать пользователя даже после перехода с Chrome в Firefox, затем в Opera и так далее.

Результат получается примерно такой:

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

Для защиты от такого трекинга можно использовать расширения вроде AudioContext Fingerprint Defender, которые подмешивают случайный шум в отпечаток.

NY Times приводит адреса email, по которым можно обратиться в трекинговые фирмы и попросить показать собранную на вас информацию.

Источник

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.

Источник