Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Web audio API

WSD Москва 2013
@html5by
Дмитрий Дудин
Эволюция звука в WEB
WebAudioAPI не <audio>

Web audio API и  <audio> 
  почти никак не связаны
<audio>
применение
  • Аудио плееры
  • Фоновая музыка
  • Аудио подсказки
WEB AUDIO API
применение
  • 3D звук (игры)
  • Обработка звука
  • Синтез  звука
  • Визуализация
  • Анализ звука
. . .
  • Многоканальное аудио.
    API поддерживает
    до 32 каналов

  • Точная синхронизация
    звуков во времени

  • Интеграция с webRTC, webGL
 . . .
goo.gl/MSCvq - online band
goo.gl/NnTNXS - 3D игры
goo.gl/sM4me - анализ
goo.gl/9ihlnh - обработка
moveit.html5.by - визуализация
А что с этой штукой 
можно делать?
Проблемы
Спецификация меняется
new webkitAudioContext -> new AudioContext() 

 AudioContext.createDelayNode() - > AudioContext.createDelay()

AudioBufferSourceNode.noteOn(0) -> AudioBufferSourceNode.start()

https://github.com/cwilso/
AudioContext-MonkeyPatch
Решение:
Поддержка браузерами
декабрь 2013

отлично
Chrome, Safari, Opera, 
Chrome android, Safari iOS

почти
Firefox (desktop + mobile) 

думают о поддержке в будущем
Internet explorer, blackberry и тп 

Пока нет универсального
 аудио формата
sources
  • AudioBufferSourceNode
     - буффер

  • MediaElementAudioSourceNode
     - <audio>,<video>

  • MediaStreamAudioSourceNode
     - микрофон
     - любой stream
Источники звука 
для Web audio 
Получатели звука
в Web 
audio
  • context.destination
    - системные динамики

  • MediaStreamAudioDestinationNode
    - stream  (аналогичный getUserMedia)
destinations
Audio context
один на всю страницу
и этого достаточно
  1. множество
    входов 
    и выходов аудио

  2. сложные аудио
    графы
Все что нужно для 
начала работы


1. Создаем аудиоконтекст
2. Загружаем звук в буфер

(например c XMLHttpRequest)
3. Соединяем и  готово !

Строим схемы обработки звука
Web audio API 
содержит огромное количество
готовых к использованию
высокоуровневых
конфигурируемых
блоков
     ... как LEGO


нужно только соединить все правильно
Начнем с простого
усилитель (gain)
задержка (delay) 
... и немного кода
Фильтры
.... эквалайзер да и только
Свертка
Convolution
пример: эхо
Генератор
(oscilator)
3D
Типовая ситуация
Panner
У каждого
паннера есть
  • координаты 
  • направление
  • скорость

У конечного
слушателя есть
  • координаты 
  • направления
  • скорость

goo.gl/5afn3n
И многое 
другое
Демки
Вопросы?
@html5by
html5.by/blog/audio

Use a spacebar or arrow keys to navigate