Web Audio API - нові можливості генерації, обробки і об'ємного розподілу звуку в браузері. - html5.by

1. Трішки історії…
2. web audio API - це НЕ елемент <audio> і НЕ його надбудова.
3. Переваги Web Audio API
4. Починаємо занурення. Audio context
5. JS
6. JS
7. Будуємо графи (схеми обробки аудіо)
8. JS
9. Предзагрузкі аудіо та відтворення
10. JS
11. модулі
12. Gain (Підсилювач)
13. JS
14. JS
15. JS
16. Delay (Лінія затримки)
17. JS
18. Convolution (Згортка)
19. JS
20. Filter (Фільтрація)
21. js
22. аналізатор
23. js
24. Генератор
25. js
26. 3D звук
27. js
28. js
29. Що ще?
30. А тепер посилання і демки!

Web Audio API - одна з новинок, яка значно розширює можливості web додатків при роботі зі звуком. Це найпотужніший інструмент, без якого Вам складно буде обійтися в майбутньому при розробці сучасних ігор та інтерактивних веб додатків. API досить високорівнева, продуманий до дрібниць, самодостатній, легкий в освоєнні і особливо елегантно інтегрується в додатки, що використовують WebGl і WebRTC.

Якщо ви краще сприймаєте відео, можете подивитися мій виступ за мотивами цієї статті на Web Standards Days в на Yandex Events (Грудень 2013)

Але, все ж, в статті все описано більш розгорнуто;)

Web audio api yandex web standards days 2013

Трішки історії…

Давним давно на зорі розвитку веб Internet explorer зробив боязку спробу зруйнувати тишу, що панує в браузері, придумав тег <bgsound>, який дозволяв автоматично програвати midi файли при відкритті сайту. У відповідь на це розробники Netscape додали аналогічну функцію за допомогою тега <embed>. Жодне з цих рішень так і не було стандартизовано, як, в принципі, і не було згодом успадковувати іншими браузерами.

Минуло кілька років і в браузерах почали активно використовуватися сторонні плагіни. Програвати аудіо стало можливим за допомогою Flash, Silverlight, QuickTime і т.п. Всі вони добре виконували свою роль, але все ж плагін має купу недоліків. Тому можливість мати інструмент для роботи зі звуком, підтримуваний веб стандартами, вже давно розбурхувала уми розробників. З масовим приходом мобільних браузерів, які не підтримують Flash, проблема стала ще гострішою.

Піонером у боротьбі з тишею без плагінів став елемент <audio>, що з'явився вже в першій специфікації html5. Він дозволяє програвати аудіо файли і стрім, контролювати відтворення, буферизацію і рівень звуку. Крім того, він простий у використанні і розумінні. Зараз він підтримується всіма мобільними і десктопними браузерами (включаючи IE9), працює досить добре, але говорити сьогодні ми будемо не про <audio> елементі.

Ми поговоримо про Web Audio API, який покликаний виконувати набагато цікавіші, різнобічні і складні завдання.

web audio API - це НЕ елемент <audio> і НЕ його надбудова.

На початку важливо зрозуміти, що елементи <audio> і web Audio API практично ніяк не пов'язані між собою. Це два незалежних, самодостатніх API, призначених для вирішення різних завдань. Єдиний зв'язок між ними полягає в тому, що <audio> елемент може бути одним із джерел звуку для web Audio API.

Завдання, які покликаний вирішувати елемент <audio>:

• Простий аудіо плеєр
• Однопоточні фонове аудіо.
• Аудіо підказки, капчи і т.п.

Завдання, які покликаний вирішувати Web Audio API:

• Об'ємний звук для ігор та інтерактивних веб додатків
• Додатки для обробки звуку
• Аудіо синтез
• Візуалізація аудіо і багато, багато, багато іншого ...

Переваги Web Audio API

• Абсолютно синхронне відтворення аудіо (можливість програвати сотні семплів одночасно з різницею в мілісекунди, точно плануючи початок і кінець відтворення кожного з них)
• Можливість обробки звуку за допомогою десятків вбудованих високорівневих блоків (фільтрів, підсилювачів, ліній затримки, модулів згортки, і т.д.)
• Багаті можливості для синтезу коливань звукової частоти з різною формою обвідної. (Можна написати найпростіший синтезатор за 10 хв)
• Робота з багатоканальним аудіо (Виходячи з специфікації, API зобов'язаний підтримувати до 32 каналів аудіо !!! Для довідки: стерео - це 2 канали, Dolby Digital - це 5 каналів, самий наворочений Dolby TrueHD - 8 каналів, тобто на сьогоднішній день у небагатьох користувачів будинку є звукові карти з більш ніж 8-ю каналами :)
• Безпосередній доступ до тимчасових і спектральних характеристиках сигналу (дозволяє робити візуалізації і аналіз аудіо потоку)
• Високорівневе 3D розподіл аудіо по каналах, в залежності від положення, напрямку і швидкості джерела звуку і слухача (що особливо круто при розробці об'ємних WebGL ігри та програми)
• Тісна інтеграція з WebRTC (як джерело звуку можна використовувати системний мікрофон, підключити гітару або мікшер. Ви також можете отримати аудіо з будь-якого зовнішнього стріму, як, втім, і відправити його туди ж)

Проблеми на поточний момент (10.2013)

1. API все ще перебуває в стадії чернетки і трохи змінюється. Здебільшого це зміни в назвах методів та наборі параметрів. Наприклад, ще півроку назад для того, щоб почати відтворення, потрібно було використовувати source.noteOn (0), зараз це source.start (0). Проблема невелика і Ви можете використовувати обгортку AudioContext-MonkeyPatch , Яку при бажанні можна підтримати своїми пулл реквестамі.
2. Підтримка браузерами. На сьогоднішній день Chrome, Safari, Opera, FF25 +, Chrome android, Safari iOS, підтримують Web Audio API в повному обсязі. IE і деякі мобільні браузери думають про підтримку в "найближчому" майбутньому. Детальніше можна подивитися тут caniuse .
3. Поки не існує хорошого універсального аудіо формату, який можна не замислюючись використовувати в web додатках. Форматів багато (mp3, mp4, wma, ogg, aac, WebM, ...) і браузерів теж багато. При цьому кожен браузер намагається просувати свій набір форматів. Детальніше можна подивитися тут . У підсумку, жоден з перерахованих форматів не підтримується всіма браузерами (09.2013). Для вирішення проблеми Вам іноді можуть знадобиться одні і ті ж аудіо семпли, представлені в різних форматах для різних браузерів.

Починаємо занурення. Audio context

Одним з основоположних понять при роботі з Web Audio API є аудіо контекст.

JS

var context = new AudioContext ();

Поки специфікація знаходиться в чернетці, в webkit браузерах потрібно використовувати webkitAudioContext. Тобто щось на зразок:

JS

var context; window.addEventListener ( 'load', function () {try {window.AudioContext = window.AudioContext || window.webkitAudioContext; context = new AudioContext ();} catch (e) {alert ( 'Opps .. Your browser do not support audio API ');}}, false);

У одного документа може бути тільки один контекст. Цього цілком достатньо для всього спектра завдань решаемого Web Audio API. Наявність одного аудіо контексту дозволяє будувати скільки завгодно складні аудіо графи з необмеженим кількістю джерел і одержувачів звукового сигналу. Практично всі методи і конструктори для створення аудіо модулів є методами аудіо контексту.

Можливі джерела звукового сигналу:

1. AudioBufferSourceNode - аудіо буфер (розглянемо нижче)
2. MediaElementAudioSourceNode - <audio> або <video> елемент
3. MediaStreamAudioSourceNode - зовнішній аудіо потік (стрім) (мікрофон або будь-який інший аудіо стрім, в тому числі зовнішній)

Можливі одержувачі звукового сигналу:

1. context.destination - системний звуковий вихід за замовчуванням (в типовому випадку - колонки).
2. MediaStreamAudioDestinationNode - аудіо потік (стрім). Цей потік може бути використаний таким же чином, як потік, отриманий через getUserMedia (), і, наприклад, може бути відправлений на віддалений RTCPeerConnection за допомогою методу addStream ().

Будуємо графи (схеми обробки аудіо)

У будь-який задуманої Вами схемою може бути один або кілька джерел і одержувачів звукового сигналу, а також модулі для роботи зі звуком (далі ми розглянемо кожен з них детальніше). Схема може бути з прямими і зворотними зв'язками, кожен модуль може мати як завгодно багато входів / виходів. Всю турботу про правильному функціонуванні бере на себе API. Ваше завдання полягає в тому, щоб з'єднати всі правильно. Давайте уявимо собі якусь абстрактну схему, просто щоб розібратися, як вона будується за допомогою коду.

Творці Web Audio API зробили побудова будь-яких графів (схем) витонченим і простим для розуміння. У кожного модуля є метод .connect (...), який приймає один параметр, власне говорить про те, до чого потрібно під'єднатися. Ось все, що потрібно написати для побудови вищезгаданої схеми:

JS

source1.connect (node1); source2.connect (node3); node1.connect (node4); node1.connect (node2); node2.connect (destination); node3.connect (node1); node4.connect (destination); node4.connect (node3);

Предзагрузкі аудіо та відтворення

Давайте розглянемо найпростіший, але досить типовий приклад роботи з web Audio API, де джерелом звукового сигналу є буфер, створений з аудіо файлу, предзагруженной за допомогою XMLHttpRequest (AJAX), а одержувачем є системний звуковий вихід.

JS

// створюємо аудіо контекст var context = new window.AudioContext (); // // змінні для буфера, джерела і одержувача var buffer, source, destination; // функція для підвантаження файлу в буфер var loadSoundFile = function (url) {// робимо XMLHttpRequest (AJAX) на сервер var xhr = new XMLHttpRequest (); xhr.open ( 'GET', url, true); xhr.responseType = 'arraybuffer'; // важливо xhr.onload = function (e) {// декодуємо бінарний відповідь context.decodeAudioData (this.response, function (decodedArrayBuffer) {// отримуємо перекодованим буфер buffer = decodedArrayBuffer;}, function (e) {console.log ( 'Error decoding file', e);}); }; xhr.send (); } // функція початку відтворення var play = function () {// створюємо джерело source = context.createBufferSource (); // підключаємо буфер до джерела source.buffer = buffer; // дефолтний одержувач звуку destination = context.destination; // підключаємо джерело до одержувача source.connect (destination); // відтворюємо source.start (0); } // функція зупинки відтворення var stop = function () {source.stop (0); } LoadSoundFile ( 'example.mp3');

Давайте випробуємо цей код в дії. Цей і всі інші приклади працюють в webkit, щоб пояснити основні принципи API. Метою статті не було зробити їх робочими у всіх браузерах :)

Web audio simple

модулі

Web Audio API містить десятки високорівневих, що конфігуруються і готових до використання модулів. Це підсилювачі, лінії затримки, фільтри, модулі згортки, сплітери і мержери каналів, 3D дріб і т.д. Ви можете створювати складні графи обробки і синтезу звуку, просто поєднуючи готові блоки і конфігуруємо їх. За простоті використання це трохи нагадує дитячий конструктор, але, на відміну від нього, тут Ви можете створювати дуже круті речі!

Давайте розглянемо основні модулі, починаючи з найпростіших.

Gain (Підсилювач)

Модуль дозволяє змінювати рівень звукового сигналу.

Будь-модуль Web Audio API можна створити, використовуючи відповідний конструктор об'єкта context. Для того, щоб отримати новий об'єкт gain, потрібно просто викликати context.createGain (). Далі Ви можете конфігурувати отриманий об'єкт як до початку, так і під час відтворення. Конфігурація, a також її можливості та способи залежать від типу модуля, але в більшості випадків все зводиться до простого налаштування значень для відповідних полів об'єкта. Ось приклад того, як створити модуль gain і змінити його рівень посилення.

JS

var gainNode = context.createGain (); gainNode.gain.value = 0.4; // значення 0..1 (можна змінювати динамічно)

Вставляємо підсилювач в вищеописану схему між джерелом і одержувачем:

JS

source.connect (gainNode); gainNode.connect (destination);

І починаємо відтворення:

JS

source.start (0);

Web audio gain node

Як Ви вже зрозуміли, все дійсно круто і продумано. Для більш наочного прикладу давайте зробимо простий crossfade ефект, яким можна керувати вручну за допомогою слайдера. Нам знадобиться 2 джерела звуку і 2 модуля gain.

Web audio crossfade effect

Ми не будемо наводити код прикладу, щоб не засмічувати статтю, однак Ви завжди можете відкрити приклад в новому вікні, проінспектувати і подивитися, як він працює.

Delay (Лінія затримки)

Цей модуль дозволяє затримувати звук на певний час.

Створюється і конфігурується за таким же принципом, як вищеописаний gain.

JS

var delayNode = context.createDelay (); delayNode.delayTime.value = 2; // 2 секунди source.connect (delayNode); delayNode.connect (destination); source.start (0);

Web audio delay node

Давайте для закріплення основних принципів створимо просту схему з нескінченним зацикленням сигналу, використовуючи gain для ослаблення сигналу і delay для затримки. Так ми отримаємо найпростіший "відлуння" ефект.

source.connect (gainNode); gainNode.connect (destination); gainNode.connect (delayNode); delayNode.connect (gainNode); var now = context.currentTime; source.start (now); source.stop (now + 0.3);

Web audio delay and gain echo

Треба сказати, що це не найкращий зразок того, як потрібно робити "відлуння" ефект, і годиться він тільки в якості прикладу. Справжнє реалістичне відлуння можна досягти за допомогою модуля згортки звукового сигналу. Давайте розглянемо його докладніше.

Convolution (Згортка)

Говорячи простою мовою, згортка - це математична операція, така ж як додавання, множення або інтегрування. При складанні двох вихідних чисел виходить третій, при згортку - з двох вихідних сигналів виходить третій сигнал. В теорії лінійних систем згортка використовується для опису відносин між трьома сигналами:

• вхідним сигналом
• імпульсною характеристикою
• вихідним сигналом

Іншими словами, вихідний сигнал дорівнює згортку вхідного сигналу з імпульсною характеристикою системи.

Що таке вхідний і вихідний сигнал, на кшталт отже зрозуміло. Залишилося тільки розібратися зі "страшним" словом імпульсна характеристика (impulse response) :)

Давайте розглянемо життєвий приклад і все відразу стане ясно.

Ви прийшли в ліс. Голосно крикнули що-небудь своєму другові. Що він почує? Правильно! Ваш голос, тільки трохи спотворений і з ефектом множинного луни. Справа в тому, що сукупність акустичних коливань, що генерується Вашими зв'язками і гортанню, перш, ніж потрапити в вушну раковину Вашого друга, буде дещо змінена під впливом навколишнього простору. Заломлення і спотворення виникнуть, наприклад, через вологість в лісі. Певна частина енергії акустичного коливання буде поглинена м'яким покриттям з моху. Також звук буде відображений від сотень дерев і оточуючих Вас предметів, що знаходяться на різній відстані. Можна ще довго перераховувати всі ці фактори, але давайте розберемося в тому, яке відношення все це має до пакунку :)

Ви вже напевно зрозуміли, що в описаній ситуації вхідним сигналом (джерелом сигналу) буде те, що кричите ви. Вихідним же сигналом є те, що чує Ваш друг. А ось ліс можна уявити собі як лінійну систему, здатну змінювати характеристики сигналу за деякими правилами, залежать від величезного набору факторів. Не заглиблюючись в теорію, всю цю савокупность правил можна представити у вигляді так званої імпульсної характеристики.

Відлуння в печері, специфічний шум при програванні старої платівки, спотворення голосу водія тролейбуса, бурчати в старий мікрофон - всі ці звукові ефекти можна однозначно представити їх імпульсними характеристиками.

Ось невелика демка. Перемикаючи ефекти, Ви всього лише змінюєте ту саму імпульсну характеристику, яка є основним параметром для модуля згортки.

Web audio convolution

Модуль згортки створюється, підключається і конфігурується так само, як і всі інші модулі.

JS

convolverNode = context.createConvolver (); convolverNode.buffer = buffer; // impulse response source.connect (convolverNode); convolverNode.connect ();

Практично у всіх типових випадках потрібна Вам імпульсна характеристика - це звичайний аудіо файл (найчастіше .wav). Як і вхідний сигнал, вона повинна бути предзагружена, декодована і записана в буфер.

Де знайти імпульсні характеристики для різних ефектів? Шукайте в гуглі щось типу "download free impulse response" і знайдете їх у величезній кількості. наприклад, тут , тут або тут .

В кінці статті буде кілька посилань для бажаючих розібратися зі сверткой докладніше. Рухаємося далі і переходимо до не менш цікавої теми - фільтрації в Web Audio API.

Filter (Фільтрація)

Під фільтрацією в цифровій обробці сигналів найчастіше мають на увазі частотну фільтрацію. Якщо Ви знаєте, що таке спектр сигналу, перетворення Фур'є і амплітудно-частотна характеристика фільтра, то просто подивіться приклад. Якщо ж Ви взагалі не в курсі, що це таке, і часу розбиратися немає, спробую пояснити на пальцях.

Все користувалися еквалайзером в улюбленому winamp, aimp, itunes і т.п., напевно, пробували різні встановлені режими (бас, диско, вокал) і обов'язково смикали повзунки на різних частотах, намагаючись домогтися потрібного звучання. Еквалайзер являє собою пристрій, який може як посилити, так і послабити певні частоти (низькі, високі частоти і т.п.)

Так от, не вдаючись в деталі

• Еквалайзер - це і є частотний фільтр
• Крива, утворена всіма повзунками - це АЧХ (амплітудно-частотна характеристика) фільтра, а по-англійськи frequency response function.

Говорячи простою мовою, за допомогою Web Audio API Ви можете додати такий "еквалайзер" (фільтр) в свій граф обробки сигналу у вигляді модуля.

З налаштуванням амплітудно-частотної характеристики все буде трохи складніше. Справа в тому, що історично все поширені типи фільтрів вже мають фізичні аналоги, у яких є певні параметри, що характеризують ці фільтри.

Ось список фільтрів доступних з коробки:

1. lowpass - фільтр ніжніх частот (обрізає все, что вищє обраної частоти)
2. highpass - вісокочастотній фільтр (обрізає все, что нижчих обраної частоти)
3. bandpass - смуговій фільтр (пропускає только Певна смугу частот)
4. lowshelf - полку на низьких частотах (означає, что посілюється або послаблюється все, что нижчих обраної частоти)
5. highshelf - полку на високих частотах (означає, что посілюється або послаблюється все, что вищє обраної частоти)
6. peaking - вузькосмуговій піковій фільтр (підсілює Певна частоту, народна назва - "фільтр-дзвін")
7. notch - вузькосмуговій режекторний фільтр (послаблює Певна частоту, народна назва - "фільтр-пробка")
8. allpass - фільтр, что пропускає всі частоти сигналу з рівнім посилений, проти змінює фазу сигналу. Відбувається це при зміні затримки пропускання по частотах. Зазвічай такий фільтр опісується одним параметром - частотою, на Якій фазовий зсув досягає 90 °.

Для того, щоб налаштовуваті ЦІ фільтри, існує кілька параметрів, Які, як ми Вже сказали, є у фізичних аналогів фільтрів. Ці параметри можна знайти у всіх книжках по теорії обробки сигналів.

• Frequency - частота, на якій базується фільтр. Вимірюється в герцах (Hz)
• Q - (добротність) - ширина смуги навколо обраної частоти, до якої застосовуватиметься посилення або ослаблення. Чим вище значення Q, тим вже смуга. Чим нижче - тим ширше.
• Gain - рівень посилення або ослаблення даної частоти. Вимірюється в децибелах (dB). Збільшення потужності сигналу в 2 рази одно 3dB. У 4 рази - 6dB. У 8 разів - 9dB і т.д.

Тут потрібно сказати, що не всі параметри актуальні для конкретного типу фільтра (докладніше можна подивитися тут )

Якщо Ви налякані кількістю нових слів, не турбуйтеся!

На ділі все йде набагато простіше, ніж в теорії. Давайте пробувати розбиратися на живому прикладі, змінюючи параметри. Гарантую, що все стане набагато зрозуміліше.

js

var filterNode = context.createBiquadFilter (); filterNode.type = 1; // High-pass filter (Тип фільтра) filterNode.frequency.value = 1000; // Cutoff to 1kHZ (Базова частота) filterNode.frequency.Q = 1; // Quality factor (Добротність) //filterNode.gain.value = 1000; // Посилення (не потрібно цього типу фільтра)

Web audio biquad filter

аналізатор

Аналізатор призначений для того, щоб отримувати інформацію про частотні і тимчасових параметрах сигналу у вигляді масиву даних. Як тільки Ви отримаєте цей масив, зможете аналізувати і візуалізувати все, що відбувається зі звуком. Типові приклади використання:

• Відобразити форму або спектр сигналу на canvas
• Змоделювати красиву 3D візуалізацію звуку в webGL
• Зробити обробку для виявлення якихось залежностей в формі або спектрі сигналу
• Аналізувати гучність на вході з мікрофона
• .. та що завгодно, аж до тексту на сторінці, що стрибає в такт музиці :)

js

var analyser = context.createAnalyser (); // Розмірність перетворення Фур'є // Якщо не розумієте, що це таке - ставте 512, 1024 або 2048;) analyser.fftSize = 2048; // Створюємо масиви для зберігання даних fFrequencyData = new Float32Array (analyser.frequencyBinCount); bFrequencyData = new Uint8Array (analyser.frequencyBinCount); bTimeData = new Uint8Array (analyser.frequencyBinCount); // Отримуємо дані analyser.getFloatFrequencyData (fFrequencyData); analyser.getByteFrequencyData (bFrequencyData); analyser.getByteTimeDomainData (bTimeData); // далі у Вас є масиви fFrequencyData, bFrequencyData, bTimeData, з якими можна робити все, що заманеться

Генератор

Генератор дозволяє синтезувати сигнали різної форми і частоти. Всі управляється 3-ма параметрами:

1. type - форма сигналу (1 - синусоїда, 2 - прямокутний, 3 - пила, 4 - трикутний)
2. frequency - частота генерації
3. detune - расстройка (вимірюється в центах). Кожна октава складається з 1200 центів, і кожен півтон складається з 100 центів. Вказавши расстройку 1200, Ви можете перейти на одну октаву вгору, а вказавши расстройку -1200 на одну октаву вниз.

А тепер з'єднуємо генератор з вищеописаним аналізатором і дивимося, що вийшло.

js

oscillator = context.createOscillator (); analyser = context.createAnalyser (); oscillator.connect (analyser); analyser.connect (destination); oscillator.start (0);

Все стає зрозуміліше, якщо самостійно погратися з Демко.

Web audio oscilator analyser

3D звук

Ну ось ми і дісталися до самої крутий штуки в Web Audio API - розподілу звуку по каналах в тривимірному просторі. Почнемо з прикладу:

Що ми бачимо? Це типова сцена 3D шутера. У ній є герой, якого ми бачимо ззаду. Він видає кілька звуків (біжить і стріляє), є багато нечисті, яка кидається і видає різні звуки, перебуваючи на різній відстані від героя, є фонова музика, є вітер, який шумить навколо і т.п.

Для того, щоб зробити цю звукову сцену 3D-реалістичною і об'ємної, потрібно дуже точно розподілити звуки по каналах, в залежності від положення, координат і швидкості кожного з персонажів. На додаток до всього, каналів може бути 2 (стерео), 5 (Dolby Digital), 8 (Dolby TrueHD), в принципі, скільки завгодно, залежно від звукової карти і установок системи. Та ще звуки від рухомих об'єктів повинні мати доплеровское зміщення по частоті. Ну, і найсумніше те, що Ваше положення як слухача, теж змінюється, якщо Ви дивіться на героя збоку.

Виникає питання, як все прорахувати? І ось вона, найголовніша фіча - Web Audio API все зробить за Вас, тобто взагалі не треба нічого прораховувати. Потрібно просто описати кількома рядками коду координати, напрямок і швидкість руху кожного з джерел звуку і слухача. І все! Всю решту брудну роботу бере на себе API, який розподілить звук по каналах, враховуючи при цьому їх кількість, додасть доплера там, де треба і створить карколомний 3D звук.

Як я вже говорив не раз, все дуже добре продумано. У Web Audio API є спеціальний модуль, який називається паннер (panner). Його можна подумки уявити, як літаючу в просторі колонку. І таких колонок може бути як завгодно багато.

Кожен паннер описується:

• координатами
• напрямком звуку
• швидкістю руху.

js

// створимо, наприклад, паннер для подання бігає і гавкає собаки var panner = context.createPanner (); // підключаємо джерело гавкання до дріб barkingSource.connect (panner); // підключаємо собачий паннер до виходу sound.panner.connect (destnation); // c якоюсь періодичністю ми будемо вказувати panner.setPosition (qx, qy, qz); // де зараз знаходиться собака panner.setOrientation (vec.x, vec.y, vec.z); // в який бік вона гавкає panner.setVelocity (dx / dt, dy / dt, dz / dt); // c якою швидкістю вона біжить

На додаток до цього Ви, як слухач (context.listener), теж описуються:

• координатами
• напрямком звуку
• швидкістю руху.

js

context.listener.setPosition (qx, qy, qz); context.listener.setOrientation (vec.x, vec.y, vec.z); context.listener.setVelocity (dx / dt, dy / dt, dz / dt);

По-моєму, це дуже круто!

Що ще?

Ось ще кілька цікавих модулів з якими можна що-небудь придумати:

• ChannelSplitterNode - поділ каналів
• ChannelMergerNode - об'єднання каналів
• DynamicsCompressorNode - динамічний компресор
• WaveShaperNode - нелінійні спотворення
• ScriptProcessorNode - можна робити все що хочемо (є буффер чисел на вході, обробляємо його і формуємо буффер чисел на виході модуля)

А тут можна знайти специфікацію, що-б відчути всю глибину web audio API.

А тепер посилання і демки!

Ця стаття опублікована під час конференції Minsk Web Standard Days 2013 . Сама презентація є тут і працює в webkit браузерах.

Чекаю питань, емоцій, критики, порад і т.п. в коментарях.