"web audio api", Анатолий Найда, moscowjs 27
TRANSCRIPT
Web Audio ApiАнатолий Найда
[email protected]/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
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
ИтогWeb Audi Api - мощный инструмент призванный решать самые сложные задачи при работе с аудио в браузере.
➢ Объемный звук для игр и интерактивных веб приложений➢ Приложения для обработки звука➢ Аудио синтез➢ Визуализация аудио и многое, многое, многое другое…
16
Всем спасибо
Презентация доступна по адресу goo.gl/oeOP2r
Со мной можно связаться по адресу [email protected]
Все полезные ссылки и демо в одном месте goo.gl/9vheE1
17