Web Audio API in 15 min
?
2 likes?2,146 views
The document provides an overview of the Web Audio API in 15 minutes. It discusses key features such as precise timing and timing control, 3D spatialization, filters and effects. It also presents examples of musical web applications that can be built with the API, including a drum machine, karaoke player, and effects studio. The document concludes by demonstrating basic code for playing audio using the API and sharing a demo application.
Web Audio API in 15 min
- 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
- 9. Timing control Background music Looping Cross fading Sounds effects Recurring sounds Real-time manipulation
- 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
- 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 ¨C Reactable!
- 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
- 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