Дмитрий Дудин — Потрясающие возможности web audio api
DESCRIPTION
Генерация, запись, обработка звука, эффекты, фильтрация, визуализация и объёмное распределение звука в браузере без использования сторонних плагинов. Простой, богатый и интуитивно понятный API для создания потрясающих воображение игр и интерактивных веб-приложений. Всё о том, как веб и аудио наконец-то пришли к взаимопониманию.TRANSCRIPT
![Page 1: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/1.jpg)
Web audio API
WSD Москва 2013
![Page 3: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/3.jpg)
Эволюция звука в WEB
![Page 4: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/4.jpg)
WebAudioAPI не <audio>
Web audio API и <audio> почти никак не связаны
![Page 5: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/5.jpg)
<audio>применение
Аудио плеерыФоновая музыкаАудио подсказки
![Page 6: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/6.jpg)
WEB AUDIO APIприменение
3D звук (игры)Обработка звукаСинтез звукаВизуализацияАнализ звука. . .
![Page 7: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/7.jpg)
Многоканальное аудио.API поддерживает до 32 каналов
Точная синхронизация звуков во времени
Интеграция с webRTC, webGL
. . .
![Page 8: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/8.jpg)
goo.gl/MSCvq online bandgoo.gl/NnTNXS 3D игрыgoo.gl/sM4me анализgoo.gl/9ihlnh обработка
moveit.html5.by визуализация
А что с этой штукой можно делать?
![Page 9: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/9.jpg)
Проблемы
![Page 10: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/10.jpg)
Спецификация меняется
new webkitAudioContext > new AudioContext()
AudioContext.createDelayNode() > AudioContext.createDelay()
AudioBufferSourceNode.noteOn(0) > AudioBufferSourceNode.start()
https://github.com/cwilso/AudioContextMonkeyPatch
Решение:
![Page 11: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/11.jpg)
Поддержка браузерами декабрь 2013
отличноChrome, Safari, Opera,
Chrome android, Safari iOS
почтиFirefox (desktop + mobile)
думают о поддержке в будущемInternet explorer, blackberry и тп
![Page 12: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/12.jpg)
Пока нет универсального аудио формата
![Page 13: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/13.jpg)
sources
AudioBufferSourceNode буффер
MediaElementAudioSourceNode <audio>,<video>
MediaStreamAudioSourceNode микрофон любой stream
Источники звука для Web audio
![Page 14: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/14.jpg)
Получатели звукав Web audio
context.destination системные динамики
MediaStreamAudioDestinationNode stream (аналогичный getUserMedia)
destinations
![Page 15: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/15.jpg)
Audio contextодин на всю страницуи этого достаточно
1. множество входов и выходов аудио
2. сложные аудио графы
![Page 16: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/16.jpg)
Все что нужно для начала работы
1. Создаем аудиоконтекст
![Page 17: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/17.jpg)
var context = new AudioContext();
2. Загружаем звук в буфер
var loadSoundFile = function(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { context.decodeAudioData(this.response, function(decodedArrayBuffer) { buffer = decodedArrayBuffer; } }; xhr.send(); }
(например c XMLHttpRequest)
![Page 18: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/18.jpg)
var play = function(){ source = context.createBufferSource(); destination = context.destination; source.buffer = buffer; source.connect(destination); source.start(0); }
var stop = function(){ source.stop(0); }
Play
3. Соединяем и готово !
![Page 19: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/19.jpg)
node.connect(otherNode)
source1.connect(node1); source2.connect(node3); node1.connect(node4); node1.connect(node2); node2.connect(destination); node3.connect(node1); node4.connect(destination); node4.connect(node3);
Строим схемы обработки звука
![Page 20: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/20.jpg)
Web audio API содержит огромное количество
готовых к использованиювысокоуровневыхконфигурируемых
блоков
... как LEGO
нужно только соединить все правильно
![Page 21: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/21.jpg)
Начнем с простогоусилитель (gain)задержка (delay)
... и немного кода
![Page 22: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/22.jpg)
Фильтры
.... эквалайзер да и только
![Page 23: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/23.jpg)
СверткаConvolution
пример: эхо
![Page 24: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/24.jpg)
Генератор(oscilator)
![Page 25: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/25.jpg)
3D
![Page 26: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/26.jpg)
Типовая ситуация
![Page 27: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/27.jpg)
Panner
У каждого паннера естькоординаты направлениескорость
У конечного слушателя естькоординаты направленияскорость
goo.gl/5afn3n
![Page 28: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/28.jpg)
Analyser все данные о времени и частоте
ChannelSplitterNode разделение каналов
ChannelMergerNode объединение каналов
DynamicsCompressorNode динамический компрессор
WaveShaperNode нелинейные искажения
ScriptProcessorNode можно делать все что хотим
И многое другое
![Page 29: Дмитрий Дудин — Потрясающие возможности Web Audio API](https://reader033.vdocuments.mx/reader033/viewer/2022052204/55639a0ad8b42a01658b48fb/html5/thumbnails/29.jpg)
goo.gl/szY7Ko web audio toygoo.gl/LSJlXv web audio playgroundgoo.gl/XuH0bh midi drum mashinegoo.gl/UVbLMt pianogoo.gl/5gm5PR rallygoo.gl/YdFlWc xylophonegoo.gl/qHY9p7 и еще много разных демок
Демки