Web Audio API in 15 min
-
Upload
ran-ben-aharon -
Category
Documents
-
view
2.638 -
download
4
Transcript of Web Audio API in 15 min
Web Audio API in 15 minutes
Ran Ben Aharon Front End lead at Everything
MIND = BLOWN
Wait.. there’s <audio> already
Gaming features
Precise timing
Timing control
3D spatialization
Filters and effects
Precise timing
Timing control
Background music
Looping
Cross fading
Sounds effects
Recurring sounds
Real-time manipulation
3D spatialization
Doppler effect
Filters and room effects
Convolution demos
Musical webapps
Musical webapps
Drum machine
Karaoke player
Full blown mixer
Wave editor
Instrument simulations
Effects studio
Audio visualizations
Audio visualizations
Html5-demos
Ring visualizer
Three audio
Y u no show code?
Basics - nodes
Types
Source (file, oscillator, stream..)
Filters and effect (reverb, gain, convolver..)
Destination (audio output, speakers..)
Basics - routing
Source Destination
Basics - routing
file.mp3 Speakers
Basics - routing
Source Destination Effect Effect
Basics - routing
file.mp3 Speakers Volume Reverb
You promised code!
Basic code
var context = new AudioContext();
function playSound(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.noteOn(0);
}
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);
}
Let’s do something cool
Demo
Hulk speech http://ranbena.github.com/hulk-speech/
WE’RE HIRING! Front End ninjas plz
http://corp.everything.me/jobs