O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

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

  • Entre para ver os comentários

"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

×