Web Audio provides a very powerful API to manage and generate sounds. We will start by reviewing the basics on how to load and play various sounds. But, we will quickly increase the complexity of the samples to create, for instance, 3D scenes synchronized with the sound being played. Expect a lot of code & demos!

1. Create fun &
immersive audio
experiences with
Web Audio

2. davrous@microsoft.com - @davrous - http://aka.ms/davrous
DAVIDROUSSET
Senior ProgramManager
Microsoft Edge / Open Web Standards
Developer Experience and Evangelism

3. Most advanced audio stack for the web!
<bgsound>
flash
<audio>
Web Audio API
Learn Web Audio API

4. Provides a complete access to the sound stream
Works via an audio routing graph based on nodes
Offers a precise control over
Time
Filter
Gain
Spectrum analyzer
Convolvers
3D spatialization
Web Audio in a nutshell

5. Not running on UI Thread, little performance impact
Supported codecs are browser based: MP3 & WAV
available everywhere
Scenarios: gaming, music web apps, speech synthesis,
etc.
Web Audio powerful & performant

6. Audio routing graph explained

7. var canUseWebAudio = false;
try {
if (typeof AudioContext !== 'undefined') {
audioContext = new AudioContext();
canUseWebAudio = true;
} else if (typeof webkitAudioContext !== 'undefined') {
audioContext = new webkitAudioContext();
canUseWebAudio = true;
}
} catch (e) {
console.error("Web Audio: " + e.message);
}
Creating the AudioContext

8. LET’S START
FROM SCRATCH

9. Mixing sounds in an easy way

10. SYNCHONIZING
SOUNDS

11. Analyzing sounds

12. ANALYZING
SOUNDS

13. Based on OpenAL (Open Audio Library)
Most of the complexity being handled for you
Omnidirectional or directional sounds
• Position
• Direction
• Velocity (Doppler effect)
3D Sounds

14. Oscillators
Procedural sounds
Filters
Convolvers effects (reverb, cathedral, phone, etc.)
Dynamic Compression
Web Audio: much more to discover!

15. Babylon.js and
Web Audio

16. How to use BABYLON.JS?
Open source project (Available on Github)
http://www.babylonjs.com
http://cdn.babylonjs.com/2-0/babylon.js
How to use it? Include one file and you’re ready to go!
To start Babylon.js, you’ve just need to create an engine object:
<script src="babylon.js"></script>
var engine = new BABYLON.Engine(canvas, true);

17. Based on Web Audio
Ambient, omnidirectional & directional sounds
3D Sounds using linear attenuation by default
Handled by your code or our .babylon format file
Can be exported from 3DS Max (Blender & Unity to
come)
Babylon.js audio engine

18. BABYLONJS
EXPERIMENTS

19. THANK
YOU!