Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Web Audio Api
Анатолий Найда
anaida@andiks.com
vk.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.response...
Загрузка аудио
var loadSoundFile = function(url) {
// делаем XMLHttpRequest (AJAX) на сервер
var xhr = new XMLHttpRequest(...
Загрузка аудио
// декодируем бинарный ответ
context.decodeAudioData( this.response,
function(decodedArrayBuffer) {
// полу...
Основные шаги для воспроизведения
1. Создаем аудиоконтекст
new AudioContext();
2. Загружаем аудио в буфер
request.response...
Базовое воспроизведение без эффектов
// функция начала воспроизведения
var play = function(){
// создаем источник
source =...
Узлы и маршрутизация
Что такое маршрутизация ?
● аудио процессинг это цепочка из узлов
● узлы соединенные друг с другом
де...
Сложный маршрут
12
13
3D звук
// создадим, например, паннер для представления летающего объекта
var panner = context.createPanner() ;
// подключ...
Библиотеки
➢ Webaudiox
➢ Howler
➢ WAD
15
Итог
Web Audi Api - мощный инструмент призванный решать самые сложные
задачи при работе с аудио в браузере.
➢ Объемный зву...
Всем спасибо
Презентация доступна по адресу goo.gl/oeOP2r
Со мной можно связаться по адресу anaida@andiks.com
Все полезные...
Prochain SlideShare
Chargement dans…5
×

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

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

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Identifiez-vous pour voir les commentaires

"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

×