Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Audio API in 15 min

3,346 views

Published on

  • Be the first to comment

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

×