Слайды доклада "Web Audio Api". Анатолий Найда, MoscowJS 27

1. Web Audio Api
Анатолий Найда
anaida@andiks.com
vk.com/anatoliy_naida

2. Воспроизведение аудио данных
на базовом уровне путем
встраивания в HTML код
➢ play
➢ pause
➢ load
HTML5 Audio
2

3. Web Audio
3
➢ cмешивание, синтез и
визуализация
➢ обработка и фильтрации
(например, пещеры или
водосточной трубы, затухание,
доплеровское смещение и т.д.)
➢ возможности присутствующие в
современных звуковых движках

4. Specification Status
Web Audio API Working Draft
Кроссбраузерность
4

5. Поддержка аудиоформатов
5
Ogg Vorbix WAV PCM AAC MP3
Edge x x x
Firefox x x partial
Chome/Safari/
mobile Safari
x x x x

6. Основные шаги для воспроизведения
1. Создаем аудиоконтекст
new AudioContext();
2. Загружаем аудио в буфер
request.responseType ='arraybuffer';
3. Подключаем источник к получателю
src.connect(ctx.destination);
4. Воспроизводим
source.start(0);
6

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

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

9. Основные шаги для воспроизведения
1. Создаем аудиоконтекст
new AudioContext();
2. Загружаем аудио в буфер
request.responseType ='arraybuffer';
3. Подключаем источник к получателю
src.connect(ctx.destination);
4. Воспроизводим
source.start(0);
9

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

11. Узлы и маршрутизация
Что такое маршрутизация ?
● аудио процессинг это цепочка из узлов
● узлы соединенные друг с другом
действуют как "маршрут звука"
Простой маршрут
11

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

13. 13

14. 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

15. Библиотеки
➢ Webaudiox
➢ Howler
➢ WAD
15

16. Итог
Web Audi Api - мощный инструмент призванный решать самые сложные
задачи при работе с аудио в браузере.
➢ Объемный звук для игр и интерактивных веб приложений
➢ Приложения для обработки звука
➢ Аудио синтез
➢ Визуализация аудио и многое, многое, многое другое…
16

17. Всем спасибо
Презентация доступна по адресу goo.gl/oeOP2r
Со мной можно связаться по адресу anaida@andiks.com
Все полезные ссылки и демо в одном месте goo.gl/9vheE1
17