Your Very First Web Audio API
Eiji Kitamura (Google Developer Advocate)
Demo
Agenda
- What's Web Audio API ?
- Digital Audio Basics
- Web Audio API Overview
- Sample Codes
- Resources
What's Web Audio API
What's different from Audio element?
- Audio element
- Focused on simply playing audio file
- Good for plyaing lengthy audio file
- Web Audio API
- Not only playing audio file, can also generate sound live
- Good for playing short sound in precise timing
What's different from Audio Data API?
- Audio Data API
- Extends Audio element to manipulate and analyse
- Generates sound in realtime
- Web Audio API
- Modularized features can be connected each other to enable routing
- Handles common analytics, effect and automation features in native level
Typical usage of Web Audio API
- Sound of games
- Audio Sequencer
- Audio Editing
Digital Audio Basics
Sound is vibration of air
- Change of air pressure delivers sound to your ears
- Fast vibration sounds high, slow vibration sounds low
- Uses unit called Hz (hertz) to express sound pitch
- Humans can hear only 20Hz ~ 20,000Hz
How to digitize sound
- Convert sound vibration into electric signal, then digitize (Sampling)
- Most common sampling rate is 44,100Hz (CD)
- Web Audio API can handle sampling data as arrays on JavaScript
Web Audio API Overview
Web Audio API is consisted of various modules
Primary interfaces
- AudioContext
Basis of all audio features. Handles time management and audio destination. - AudioBuffer
Source of sound. - AudioNode
Ancestor of most of modules. Have input and output. - AudioParam
Parameter controller with automation.
Most basic moduler structure
Various AudioNodes
- Gain
Changes volume of sound. - Dynamics Compressor
Compresses volume gap. - Convolver
Generates effected sound using different audio file. - Delay
Delays sound. - Biquad Filter
Generic filter using native process.
Various AudioNodes
- Panner
Enables to cast sound in stereo or 3D space (multi channel enabled) - Realtime Analyser
Helps you to analyse sound - Audio Channel Splitter
Splits sound into multiple channels - Audio Channel Merger
Merges sound into single channel - Wave Shaper
Gives sound distortion effect.
Demo
Sample Codes
Basic of plyaing sound
var c = new webkitAudioContext(); var source = c.createBufferSource(); // Generate BufferSourceNode source.buffer = buffer; // Pre-loaded audio file source.connect(c.destination); // Connect nodes source.noteOn(0); // Play sound
Adding node
var g = c.createGainNode(); // Generate GainNode g.gain.value = 0.5; // Turn down volume to 0.5 source.connect(g); // Connect sound source to GainNode g.connect(c.destination); // Connect GainNode to destination
How to load audio file
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer'; // Load binary (arraybuffer)
// Decode loaded audio binary file asynchronously
xhr.onload = function() {
context.decodeAudioData(xhr.response, function(buffer) {
dogBarkingBuffer = buffer;
}, onError);
}
xhr.send();