Web Audio API in 15 min

3,068 views
2,935 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,068
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Audio API in 15 min

  1. 1. Web Audio APIin 15 minutes
  2. 2. Ran Ben AharonFront End lead at Everything
  3. 3. MIND = BLOWN
  4. 4. Wait.. there’s <audio> already
  5. 5. Gaming featuresPrecise timingTiming control3D spatializationFilters and effects
  6. 6. Precise timing
  7. 7. Timing controlBackground musicLoopingCross fadingSounds effectsRecurring soundsReal-time manipulation
  8. 8. 3D spatialization
  9. 9. Doppler effect
  10. 10. Filters and room effectsConvolution demos
  11. 11. Musical webapps
  12. 12. Musical webappsDrum machineKaraoke playerFull blown mixerWave editorInstrument simulationsEffects studio
  13. 13. Audio visualizations
  14. 14. Audio visualizationsHtml5-demosRing visualizerThree audio
  15. 15. Y u no show code?
  16. 16. Basics - nodesTypesSource (file, oscillator, stream..)Filters and effect (reverb, gain, convolver..)Destination (audio output, speakers..)
  17. 17. Basics - routing Source Destination
  18. 18. Basics - routing file.mp3 Speakers
  19. 19. Basics - routing Source Effect Effect Destination
  20. 20. Basics - routing file.mp3 Volume Reverb Speakers
  21. 21. Basics - routingBest way to demonstrate – Reactable!
  22. 22. You promised code!
  23. 23. Basic codevar context = new AudioContext();function playSound(buffer) { var source = context.createBufferSource(); source.buffer = buffer; source.connect(context.destination); source.noteOn(0);}
  24. 24. Basic codevar 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);}
  25. 25. Let’s do something cool
  26. 26. DemoHulk speechhttp://ranbena.github.com/hulk-speech/
  27. 27. Ran Ben AharonFront End lead at Everythingran@everything.me /ranbena /ranbena
  28. 28. WE’RE HIRING!Front End ninjas plzhttp://corp.everything.me/jobs

×