Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

  • Login to see the comments

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

  1. 1. Web Audio Api Анатолий Найда anaida@andiks.com vk.com/anatoliy_naida
  2. 2. Воспроизведение аудио данных на базовом уровне путем встраивания в HTML код ➢ play ➢ pause ➢ load HTML5 Audio 2
  3. 3. Web Audio 3 ➢ cмешивание, синтез и визуализация ➢ обработка и фильтрации (например, пещеры или водосточной трубы, затухание, доплеровское смещение и т.д.) ➢ возможности присутствующие в современных звуковых движках
  4. 4. Specification Status Web Audio API Working Draft Кроссбраузерность 4
  5. 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. 6. Основные шаги для воспроизведения 1. Создаем аудиоконтекст new AudioContext(); 2. Загружаем аудио в буфер request.responseType ='arraybuffer'; 3. Подключаем источник к получателю src.connect(ctx.destination); 4. Воспроизводим source.start(0); 6
  7. 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. 8. Загрузка аудио // декодируем бинарный ответ context.decodeAudioData( this.response, function(decodedArrayBuffer) { // получаем декодированный буфер buffer = decodedArrayBuffer ; }, function(e) { console.log('Error decoding file', e); }); }; xhr.send(); } 8
  9. 9. Основные шаги для воспроизведения 1. Создаем аудиоконтекст new AudioContext(); 2. Загружаем аудио в буфер request.responseType ='arraybuffer'; 3. Подключаем источник к получателю src.connect(ctx.destination); 4. Воспроизводим source.start(0); 9
  10. 10. Базовое воспроизведение без эффектов // функция начала воспроизведения var play = function(){ // создаем источник source = context.createBufferSource() ; // подключаем буфер к источнику source.buffer = buffer; // дефолтный получатель звука destination = context.destination; // подключаем источник к получателю source.connect(destination); // воспроизводим source.start(0); } 10
  11. 11. Узлы и маршрутизация Что такое маршрутизация ? ● аудио процессинг это цепочка из узлов ● узлы соединенные друг с другом действуют как "маршрут звука" Простой маршрут 11
  12. 12. Сложный маршрут 12
  13. 13. 13
  14. 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. 15. Библиотеки ➢ Webaudiox ➢ Howler ➢ WAD 15
  16. 16. Итог Web Audi Api - мощный инструмент призванный решать самые сложные задачи при работе с аудио в браузере. ➢ Объемный звук для игр и интерактивных веб приложений ➢ Приложения для обработки звука ➢ Аудио синтез ➢ Визуализация аудио и многое, многое, многое другое… 16
  17. 17. Всем спасибо Презентация доступна по адресу goo.gl/oeOP2r Со мной можно связаться по адресу anaida@andiks.com Все полезные ссылки и демо в одном месте goo.gl/9vheE1 17

×