Вначале работа с Web Audio API (WAA) может быть немного сложной. Следующие визуализации облегчают восприятие последних (сентябрь 2016 г.) основных концепций WAA. Они полезны для:

  • Тем, кто хочет ознакомиться с WAA и
  • Тем, кто уже работает с WAA и нужен краткий справочник по API.

Для плавного ознакомления с Web Audio API я рекомендую eBook of Boris Smus.

Цвета на рисунках:

Рисунок ½: Объяснение используемых цветов

1. [(Базовый)/(Автономный)]Аудиоконтекст

Сердцем WAA является абстрактный интерфейс BaseAudioContext. Два дополнительных интерфейса расширяют базу:

  • AudioContext, который используется для рендеринга в реальном времени и
  • OfflineAudioContext, который используется для автономной обработки.

Оба AudioContexts предоставляют все необходимые методы для создания и подключения AudioNodes, формируя Audio Graph. Общие аудиографики состоят из источников, процессоров и приемников.

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

В большинстве случаев для каждого документа следует использовать только один AudioContext.

Рис. 1. Аудиоконтексты API веб-аудио

2. Источники

Источники делятся на две основные категории:

  • Синтетический
  • Аудиовизуальный мультимедийный контент.

Аудиовизуальный мультимедийный контент можно дополнительно классифицировать на:

  • Локальные медиафайлы на устройстве (например, mp3, mp4 и т. д.)
  • Удаленные медиафайлы, загруженные с веб-/Ftp-сервера
  • Удаленные медиапотоки (например, SoundCloud, Netflix, YouTube, радио и т. д.)
  • Локальные медиапотоки (например, веб-камера, микрофон и т. д.)

Источники аудиовизуального медиаконтента должны быть сначала декодированы с использованием API/тегов HTML5 (теги FileApi, XHR, аудио и видео), прежде чем они будут переданы в WAA.

Рис. 2. Источники API веб-аудио

3. Процессоры

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

  • Основные операции (GainNode, DelayNode, StereoPannerNode)
  • КИХ- и БИХ-фильтры (ConvolverNode, BiquadFilterNode, IIRFilterNode)
  • Эффекты (WaveShaperNode)
  • Управление каналами (ChannelSplitterNode, ChannelMergerNode)
  • Пространственность (PannerNode, AudioListener)
  • Постобработка (DynamicsCompressorNode)
  • Пользовательская обработка (ScriptProcessorNode, AudioWorkletNode).

Рисунок 3. Процессоры API веб-аудио

4. Раковины

Существует три типа раковин:

  • AudioDestinationNode, который направляется на устройство вывода в реальном времени и воспроизводит звук, направленный пользователю.
  • MediaStreamAudioDestinationNode, который представляет собой аудиоприемник, представляющий MediaStream, который можно, например, отправить удаленному узлу и
  • AnalyserNode, который представляет собой узел, способный предоставлять данные анализа частоты и временной области в реальном времени, в основном для визуализации, а не для обработки звука, поскольку поток звука будет передается без обработки от входа к выходу.

Рисунок 4. Приемники Web Audio API

(Из Блога АРИЯ-3D)