Веб-API для аудио

Веб-API для аудио предоставляет мощную и универсальную систему управления звуком в веб-приложениях, позволяя разработчикам выбирать источники звука, добавлять эффекты к звуку, создавать визуализации звука, применять пространственные эффекты (например, панорамирование) и многое другое.

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

Аудиоузлы связываются в цепочки и простые сети через свои входы и выходы. Обычно они начинаются с одного или нескольких источников. Источники предоставляют массивы интенсивностей звука (образцы) в очень малых временных срезах, часто десятки тысяч из них в секунду. Они могут быть вычислены математически (например, OscillatorNode), или они могут быть записями из звуковых/видео файлов (например, AudioBufferSourceNode и MediaElementAudioSourceNode) и аудиопотоков (MediaStreamAudioSourceNode). Фактически, звуковые файлы — это просто записи интенсивностей звука, которые поступают с микрофонов или электронных инструментов и смешиваются в одну сложную волну.

Выходы этих узлов могут быть связаны со входами других, которые смешивают или изменяют эти потоки образцов звука в разные потоки. Распространённое изменение — умножение образцов на значение, чтобы сделать их громче или тише (как в случае с GainNode). После того, как звук был достаточно обработан для желаемого эффекта, он может быть связан с входом назначения (BaseAudioContext.destination), которое отправляет звук на динамики или наушники. Это последнее соединение необходимо только в том случае, если пользователь должен услышать звук.

Типичный простой рабочий процесс для веб-аудио выглядит следующим образом:

1. Создайте аудиоконтекст
2. Внутри контекста создайте источники — например, <audio>, генератор, поток
3. Создайте узлы эффектов, такие как реверберация, биквадратный фильтр, панорамирование, компрессор
4. Выберите конечное назначение аудио, например, динамики вашего устройства
5. Подключите источники к эффектам, а эффекты к назначению.

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

Веб-API для аудио также позволяет контролировать пространственное расположение звука. Используя систему, основанную на модели «источник-слушатель», он позволяет управлять моделью панорамирования и обрабатывает затухание, вызванное расстоянием, от перемещающегося источника (или перемещающегося слушателя).

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

Он может использоваться для добавления аудио в ваш веб-сайт или приложение, например, создавая атмосферу как futurelibrary.no, или предоставляя слуховые подсказки для форм. Однако он также может использоваться для создания сложных интерактивных инструментов. Учитывая это, он подходит как для разработчиков, так и для музыкантов.

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

Также есть статья Основные понятия веб-API для аудио, чтобы помочь вам понять работу цифрового звука, особенно в контексте API. Она также включает хорошее введение в некоторые концепции, на которых основан API.

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

У нас также есть другие учебники и справочные материалы, охватывающие все функции API. Дополнительную информацию см. в боковой панели этой страницы.

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

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

Веб-API для аудио имеет ряд интерфейсов и связанных событий, которые мы разделили на девять категорий функций.

Общие контейнеры и определения, формирующие графики аудио в веб-API для аудио.

AudioContext

Интерфейс AudioContext представляет собой граф обработки аудио, созданный из соединенных друг с другом аудиомодулей, каждый из которых представлен AudioNode. Аудиоконтекст управляет созданием узлов, которые он содержит, и выполнением обработки аудио или декодирования. Вам нужно создать AudioContext перед выполнением любых других действий, так как все происходит внутри контекста.

AudioNode

Интерфейс AudioNode представляет собой модуль обработки аудио, такой как источник звука (например, HTML <audio> или <video> элемент), назначение звука, промежуточный модуль обработки (например, фильтр, как BiquadFilterNode, или управление громкостью, как GainNode).

AudioParam

Интерфейс AudioParam представляет собой параметр, связанный со звуком, например, один из AudioNode. Он может быть установлен на определенное значение или изменён, и его можно запланировать на определённое время и по определённому шаблону.

AudioParamMap

Предоставляет интерфейс типа карты для группы интерфейсов AudioParam, что означает, что он предоставляет методы forEach(), get(), has(), keys(), и values(), а также свойство size.

BaseAudioContext

Интерфейс BaseAudioContext служит базовым определением для онлайн и офлайн графиков обработки звука, представленных соответственно AudioContext и OfflineAudioContext. Вы не будете использовать BaseAudioContext напрямую — вы будете использовать его функции через один из этих двух наследуемых интерфейсов.

Событие ended

Событие ended срабатывает, когда воспроизведение остановлено из-за достижения конца медиа.

Интерфейсы, определяющие источники звука для использования в API Web Audio.

AudioScheduledSourceNode

Интерфейс AudioScheduledSourceNode является родительским интерфейсом для нескольких типов интерфейсов узлов источников звука. Он является AudioNode.

OscillatorNode

Интерфейс OscillatorNode представляет собой периодическую форму волны, такую как синусоидальная или треугольная. Это модуль обработки аудио AudioNode, который вызывает создание волны с заданной частотой.

AudioBuffer

Интерфейс AudioBuffer представляет собой короткий аудио-актив, хранящийся в памяти, созданный из аудиофайла с помощью метода BaseAudioContext.decodeAudioData или созданный с использованием исходных данных с помощью BaseAudioContext.createBuffer. После декодирования в этот формат аудио может быть помещен в AudioBufferSourceNode.

AudioBufferSourceNode

Интерфейс AudioBufferSourceNode представляет собой источник звука, состоящий из аудиоданных в памяти, хранящихся в AudioBuffer. Это AudioNode, который действует как источник звука.

MediaElementAudioSourceNode

Интерфейс MediaElementAudioSourceNode представляет собой источник звука, состоящий из HTML-элемента <audio> или <video>. Это AudioNode, который действует как источник звука.

MediaStreamAudioSourceNode

Интерфейс MediaStreamAudioSourceNode представляет собой источник звука, состоящий из MediaStream (например, веб-камеры, микрофона или потока, отправляемого с удаленного компьютера). Если в потоке присутствует несколько аудиодорожек, используется дорожка, чьё значение id стоит первой лексикографически (алфавитно). Это AudioNode, который действует как источник звука.

MediaStreamTrackAudioSourceNode

Узел типа MediaStreamTrackAudioSourceNode представляет собой источник звука, данные которого поступают с MediaStreamTrack. При создании узла с помощью метода createMediaStreamTrackSource() для создания узла вы указываете, какую дорожку использовать. Это предоставляет больший контроль, чем MediaStreamAudioSourceNode.

Интерфейсы для определения эффектов, которые вы хотите применить к своим источникам звука.

BiquadFilterNode

Интерфейс BiquadFilterNode представляет собой простой фильтр низкого порядка. Это AudioNode, который может представлять различные виды фильтров, устройств управления тоном или графических эквалайзеров. У BiquadFilterNode всегда ровно один вход и один выход.

ConvolverNode

Интерфейс ConvolverNode является AudioNode, который выполняет линейную свёртку над заданным AudioBuffer и часто используется для достижения эффекта реверберации.

DelayNode

Интерфейс DelayNode представляет собой линию задержки; модуль обработки аудио AudioNode, который вызывает задержку между поступлением входных данных и его распространением на выход.

DynamicsCompressorNode

Интерфейс DynamicsCompressorNode обеспечивает эффект компрессии, который понижает громкость самых громких частей сигнала, чтобы предотвратить клиппинг и искажение, которые могут возникнуть при воспроизведении и одновременном мультиплексировании нескольких звуков.

GainNode

Интерфейс GainNode представляет собой изменение громкости. Это модуль обработки аудио AudioNode, который применяет заданный усиление к входным данным перед их распространением на выход.

WaveShaperNode

Интерфейс WaveShaperNode представляет собой нелинейный искажатель. Это AudioNode, который использует кривую для применения волнового искажения к сигналу. Помимо очевидных эффектов искажения, его часто используют, чтобы добавить тепло к сигналу.

PeriodicWave

Описывает периодическую волну, которая может использоваться для формирования выходного сигнала OscillatorNode.

IIRFilterNode

Реализует общий фильтр бесконечной импульсной характеристики (IIR); этот тип фильтра может использоваться для реализации устройств управления тоном и графических эквалайзеров.

После обработки звука, эти интерфейсы определяют, куда его выводить.

AudioDestinationNode

Интерфейс AudioDestinationNode представляет собой конечное назначение источника звука в данном контексте — обычно динамики вашего устройства.

MediaStreamAudioDestinationNode

Интерфейс MediaStreamAudioDestinationNode представляет собой аудио-назначение, состоящее из WebRTC MediaStream с единственным AudioMediaStreamTrack, который может быть использован подобно MediaStream, полученному из getUserMedia(). Это AudioNode, который действует как аудио-назначение.

Если вам нужно извлечь временные, частотные и другие данные из вашего аудио, то вам понадобится AnalyserNode.

AnalyserNode

Интерфейс AnalyserNode представляет собой узел, способный предоставлять информацию о частотной и временной области в режиме реального времени для целей анализа и визуализации данных.

Для разделения и объединения аудиоканалов вы будете использовать эти интерфейсы.

ChannelSplitterNode

Интерфейс ChannelSplitterNode разделяет различные каналы источника звука на набор моно выходов.

ChannelMergerNode

Интерфейс ChannelMergerNode объединяет различные моно входы в один выход. Каждый вход будет использован для заполнения канала на выходе.

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

AudioListener

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

PannerNode

Интерфейс PannerNode представляет собой положение и поведение сигнала источника звука в 3D пространстве, позволяя создавать сложные эффекты панорамирования.

StereoPannerNode

Интерфейс StereoPannerNode представляет собой простой стерео-панорамный узел, который может использоваться для панорамирования аудиопотока влево или вправо.

Используя аудио-ворклеты, вы можете определять пользовательские аудио-узлы, написанные на JavaScript или WebAssembly. Аудио-ворклеты реализуют интерфейс Worklet, облегчённую версию интерфейса Worker.

AudioWorklet

Интерфейс AudioWorklet доступен через объект AudioContext по свойству audioWorklet и позволяет добавлять модули в аудио-ворклет для выполнения вне основного потока.

AudioWorkletNode

Интерфейс AudioWorkletNode представляет аудио-узел, встроенный в аудио-граф, и может передавать сообщения соответствующему AudioWorkletProcessor.

AudioWorkletProcessor

Интерфейс AudioWorkletProcessor представляет код обработки звука, выполняющийся в AudioWorkletGlobalScope и генерирующий, обрабатывающий или анализирующий звук непосредственно, и может передавать сообщения соответствующему AudioWorkletNode.

AudioWorkletGlobalScope

Интерфейс AudioWorkletGlobalScope — производный от WorkletGlobalScope объект, представляющий контекст потока, в котором выполняется скрипт обработки звука; он предназначен для возможности генерации, обработки и анализа аудиоданных непосредственно с помощью JavaScript в потоке ворклета, а не в основном потоке.

Устаревшие: узлы script processor

До определения аудио-ворклетов API Web Audio использовал ScriptProcessorNode для обработки звука на JavaScript. Поскольку код выполняется в основном потоке, производительность у них плохая. ScriptProcessorNode сохраняется по историческим причинам, но отмечен как устаревший.

ScriptProcessorNode Устаревший

Интерфейс ScriptProcessorNode позволяет генерировать, обрабатывать или анализировать звук с помощью JavaScript. Это модуль обработки аудио, который связан с двумя буферами: одним, содержащим текущий вход, и другим, содержащим выход. Каждый раз, когда буфер ввода содержит новые данные, в объект отправляется событие, реализующее интерфейс AudioProcessingEvent, а обработчик события завершается, когда он заполнит буфер вывода данными.

audioprocess (событие) Устаревший

Событие audioprocess срабатывает, когда буфер ввода API Web Audio ScriptProcessorNode готов к обработке.

AudioProcessingEvent Устаревший

AudioProcessingEvent представляет события, возникающие, когда буфер ввода ScriptProcessorNode готов к обработке.

Можно очень быстро обработать/отрендерить аудио-граф в фоновом режиме — отрендерить его в AudioBuffer, а не в динамики устройства — с помощью следующего.

OfflineAudioContext

Интерфейс OfflineAudioContext — это интерфейс AudioContext, представляющий аудио-граф, построенный из соединённых AudioNode элементов. В отличие от стандартного AudioContext, OfflineAudioContext не рендерит звук, а генерирует его, насколько это возможно быстро, в буфере.

complete (событие)

Событие complete срабатывает, когда завершается рендеринг OfflineAudioContext.

OfflineAudioCompletionEvent

OfflineAudioCompletionEvent представляет события, которые происходят при завершении обработки OfflineAudioContext. Событие complete использует этот интерфейс.

Расширенные методы: Создание и упорядочивание звука

В этом руководстве мы рассмотрим создание и изменение звука, а также временные интервалы и планирование. Мы познакомимся с загрузкой образцов, огибающими, фильтрами, таблицей волн и модуляцией частоты. Если вы знакомы с этими терминами и ищете введение в их применение с помощью API Web Audio, вы попали по адресу.

Обработка звука в фоновом режиме с помощью AudioWorklet

В этой статье объясняется, как создать процессор аудио-ворклет и использовать его в приложении Web Audio.

Основные понятия API Web Audio

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

Управление несколькими параметрами с помощью ConstantSourceNode

В этой статье показано, как использовать ConstantSourceNode для связывания нескольких параметров вместе, чтобы они делили одно значение, которое можно изменить, установив значение параметра ConstantSourceNode.offset.

Пример и учебное пособие: Простой синтезатор с клавиатурой

В этой статье представлены код и демонстрация работы виртуальной клавиатуры, которую можно играть с помощью мыши. Клавиатура позволяет переключаться между стандартными формами волн, а также одной пользовательской формой волны, и вы можете контролировать основной усиление с помощью ползунка громкости под клавиатурой. В этом примере используются следующие интерфейсы API Web: AudioContext, OscillatorNode, PeriodicWave, и GainNode.

Использование IIR-фильтров

Интерфейс IIRFilterNode API Web Audio представляет собой процессор, реализующий общий фильтр бесконечной импульсной характеристики (IIR); этот тип фильтра может использоваться для реализации устройств коррекции тона и графических эквалайзеров, а параметры отклика фильтра могут быть указаны, что позволяет настроить его в соответствии с вашими потребностями. В этой статье показано, как реализовать его и использовать в простом примере.

Использование API Web Audio

Давайте рассмотрим, как начать работу с API Web Audio. Мы кратко рассмотрим некоторые концепции, а затем изучим простой пример бумбокса, который позволит нам загрузить аудиодорожку, воспроизводить и приостанавливать её, изменять громкость и стереопанорамирование.

Визуализация с помощью API Web Audio

Одна из самых интересных особенностей API Web Audio — это возможность извлекать данные о частоте, форме волны и другие данные из вашего источника звука, которые затем можно использовать для создания визуализаций. В этой статье рассказывается, как это сделать, и приводятся несколько основных примеров использования.

Рекомендации по использованию API Web Audio

Нет строго правильного или неправильного способа написания творческого кода. Достаточно учесть безопасность, производительность и доступность, чтобы приспособиться к собственному стилю. В этой статье мы поделимся рядом рекомендаций — указаний, советов и приёмов работы с API Web Audio.

Основы пространственной обработки звука Web Audio

Как будто обширного разнообразия возможностей обработки звука (и прочего) недостаточно, API Web Audio также содержит средства для имитации различия звука в зависимости от перемещения слушателя вокруг источника звука, например, панорамирования, когда вы перемещаетесь вокруг источника звука внутри 3D игры. Официальное название этого — пространственная обработка звука, и в этой статье будут рассмотрены основы реализации такой системы.

Вы можете найти множество примеров в нашем репозитории webaudio-examples на GitHub.

• Основные понятия Web Audio API
• Использование Web Audio API
• Расширенные техники: создание звука, последовательность, синхронизация, планирование
• Руководство по автовоспроизведению для медиа и Web Audio API
• Использование фильтров IIR
• Визуализация с помощью Web Audio API
• Основы пространственного звука Web Audio API
• Управление несколькими параметрами с помощью ConstantSourceNode
• Смешивание позиционного звука и WebGL (2012)
• Разработка звукового сопровождения игр с помощью Web Audio API (2012)

• Tones: простая библиотека для воспроизведения определенных тонов/нот с помощью Web Audio API.
• Tone.js: фреймворк для создания интерактивной музыки в браузере.
• howler.js: библиотека аудио JS, которая по умолчанию использует Web Audio API и использует HTML Audio в качестве резервного варианта, а также предоставляет другие полезные функции.
• Mooog: цепочки AudioNodes в стиле jQuery, микшер-стильные отправки/возвраты и многое другое.
• XSound: Библиотека Web Audio API для синтезатора, эффектов, визуализации, записи и т. д.
• OpenLang: веб-приложение для лаборатории языка HTML-видео, использующее Web Audio API для записи и объединения видео и звука из разных источников в один файл (исходный код на GitHub)
• Pts.js: упрощает визуализацию веб-аудио (руководство)

• Веб-технологии для медиа
• Руководство по типам и форматам медиа в веб