Вначале работа с 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)