1. Web Audio API
in 15 minutes

2. Ran Ben Aharon
Front End lead at Everything

5. MIND = BLOWN

6. Wait.. there’s <audio> already

7. Gaming features
Precise timing
Timing control
3D spatialization
Filters and effects

8. Precise timing

9. Timing control
Background music
Looping
Cross fading
Sounds effects
Recurring sounds
Real-time manipulation

10. 3D spatialization

11. Doppler effect

12. Filters and room effects
Convolution demos

13. Musical webapps

14. Musical webapps
Drum machine
Karaoke player
Full blown mixer
Wave editor
Instrument simulations
Effects studio

15. Audio visualizations

16. Audio visualizations
Html5-demos
Ring visualizer
Three audio

17. Y u no show code?

18. Basics - nodes
Types
Source (file, oscillator, stream..)
Filters and effect (reverb, gain, convolver..)
Destination (audio output, speakers..)

19. Basics - routing
Source Destination

20. Basics - routing
file.mp3 Speakers

21. Basics - routing
Source Effect Effect Destination

22. Basics - routing
file.mp3 Volume Reverb Speakers

23. Basics - routing
Best way to demonstrate – Reactable!

24. You promised code!

25. Basic code
var context = new AudioContext();
function playSound(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.noteOn(0);
}

26. Basic code
var context = new AudioContext();
function playSound(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
var gainNode = context.createGainNode();
gainNode.gain = 0.5;
source.connect(gainNode);
gainNode.connect(context.destination);
source.noteOn(0);
}

27. Let’s do something cool

28. Demo
Hulk speech
http://ranbena.github.com/hulk-speech/

29. Ran Ben Aharon
Front End lead at Everything
ran@everything.me
/ranbena
/ranbena

30. WE’RE HIRING!
Front End ninjas plz
http://corp.everything.me/jobs