Web Audio ApiАнатолий Найда

anaida@andiks.comvk.com/anatoliy_naida

Воспроизведение аудио данных на базовом уровне путем встраивания в HTML код

➢ play➢ pause➢ load

HTML5 Audio

2

Web Audio

3

➢ cмешивание, синтез и визуализация

➢ обработка и фильтрации (например, пещеры или водосточной трубы, затухание, доплеровское смещение и т.д.)

➢ возможности присутствующие в современных звуковых движках

Specification Status

Web Audio API Working Draft

Кроссбраузерность

4

Поддержка аудиоформатов

5

Ogg Vorbix WAV PCM AAC MP3

Edge x x x

Firefox x x partial

Chome/Safari/mobile Safari

x x x x

Основные шаги для воспроизведения

1. Создаем аудиоконтекст new AudioContext();

2. Загружаем аудио в буферrequest.responseType ='arraybuffer';

3. Подключаем источник к получателюsrc.connect(ctx.destination);

4. Воспроизводимsource.start(0);

6

Загрузка аудио

var loadSoundFile = function(url) { // делаем XMLHttpRequest (AJAX) на сервер var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) {

...

7

Загрузка аудио

// декодируем бинарный ответ context.decodeAudioData( this.response, function(decodedArrayBuffer) { // получаем декодированный буфер buffer = decodedArrayBuffer ; }, function(e) { console.log('Error decoding file', e); }); }; xhr.send();}

8

Основные шаги для воспроизведения

1. Создаем аудиоконтекст new AudioContext();

2. Загружаем аудио в буферrequest.responseType ='arraybuffer';

3. Подключаем источник к получателюsrc.connect(ctx.destination);

4. Воспроизводимsource.start(0);

9

Базовое воспроизведение без эффектов

// функция начала воспроизведенияvar play = function(){ // создаем источник source = context.createBufferSource() ; // подключаем буфер к источнику source.buffer = buffer; // дефолтный получатель звука destination = context.destination; // подключаем источник к получателю source.connect(destination); // воспроизводим source.start(0);}

10

Узлы и маршрутизация

Что такое маршрутизация ?

● аудио процессинг это цепочка из узлов

● узлы соединенные друг с другом действуют как "маршрут звука"

Простой маршрут

11

Сложный маршрут

12

13

3D звук// создадим, например, паннер для представления летающего объектаvar panner = context.createPanner();// подключаем источник к паннеруmoveSource.connect(panner);// подключаем паннер к выходуsound.panner.connect(destnation);

// c какой-то периодичностью мы будем указывать

// где сейчас находится объектpanner.setPosition(q.x, q.y, q.z); // в какую сторону он летитpanner.setOrientation(vec. x, vec.y, vec.z); // c какой скоростью он летитpanner.setVelocity(dx/dt, dy/dt, dz/dt);

14

Библиотеки

➢ Webaudiox➢ Howler➢ WAD

15

ИтогWeb Audi Api - мощный инструмент призванный решать самые сложные задачи при работе с аудио в браузере.

➢ Объемный звук для игр и интерактивных веб приложений➢ Приложения для обработки звука➢ Аудио синтез➢ Визуализация аудио и многое, многое, многое другое…

16

Всем спасибо

Презентация доступна по адресу goo.gl/oeOP2r

Со мной можно связаться по адресу anaida@andiks.com

Все полезные ссылки и демо в одном месте goo.gl/9vheE1

17