web audio api in 15 min
TRANSCRIPT
![Page 1: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/1.jpg)
Web Audio API in 15 minutes
![Page 2: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/2.jpg)
Ran Ben Aharon Front End lead at Everything
![Page 3: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/3.jpg)
![Page 4: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/4.jpg)
![Page 5: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/5.jpg)
MIND = BLOWN
![Page 6: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/6.jpg)
Wait.. there’s <audio> already
![Page 7: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/7.jpg)
Gaming features
Precise timing
Timing control
3D spatialization
Filters and effects
![Page 8: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/8.jpg)
Precise timing
![Page 9: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/9.jpg)
Timing control
Background music
Looping
Cross fading
Sounds effects
Recurring sounds
Real-time manipulation
![Page 10: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/10.jpg)
3D spatialization
![Page 11: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/11.jpg)
Doppler effect
![Page 12: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/12.jpg)
Filters and room effects
Convolution demos
![Page 13: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/13.jpg)
Musical webapps
![Page 14: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/14.jpg)
Musical webapps
Drum machine
Karaoke player
Full blown mixer
Wave editor
Instrument simulations
Effects studio
![Page 15: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/15.jpg)
Audio visualizations
![Page 16: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/16.jpg)
Audio visualizations
Html5-demos
Ring visualizer
Three audio
![Page 17: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/17.jpg)
Y u no show code?
![Page 18: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/18.jpg)
Basics - nodes
Types
Source (file, oscillator, stream..)
Filters and effect (reverb, gain, convolver..)
Destination (audio output, speakers..)
![Page 19: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/19.jpg)
Basics - routing
Source Destination
![Page 20: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/20.jpg)
Basics - routing
file.mp3 Speakers
![Page 21: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/21.jpg)
Basics - routing
Source Destination Effect Effect
![Page 22: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/22.jpg)
Basics - routing
file.mp3 Speakers Volume Reverb
![Page 24: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/24.jpg)
You promised code!
![Page 25: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/25.jpg)
Basic code
var context = new AudioContext();
function playSound(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.noteOn(0);
}
![Page 26: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/26.jpg)
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);
}
![Page 27: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/27.jpg)
Let’s do something cool
![Page 28: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/28.jpg)
Demo
Hulk speech http://ranbena.github.com/hulk-speech/
![Page 30: Web Audio API in 15 min](https://reader033.vdocuments.mx/reader033/viewer/2022052322/5582974fd8b42a94688b46c5/html5/thumbnails/30.jpg)
WE’RE HIRING! Front End ninjas plz
http://corp.everything.me/jobs