Basic-Examples
What can web developers do with an Audio API?
The following list attempts to answer the above question with simple code examples. Links to external demonstrations using any/all implementations are encouraged. If you have a demo you would like to add to this list, please mail to: public-audio@w3.org.
List of Examples
- Looping sounds without gaps: Code Example
- Creating seamless playlists
- FadeIns / FadeOuts / Crossfades
- Add filters to audio such as Bass/Treble/EQ control: Code Example
- Automating volume, pan, pitch and speed parameters over time: Code Example
- Cross-fading between two sounds.
- Synchronizing sounds to begin playing at the same time, or at specific times.
- Playing sounds with rhythm: EG: Drum beats
- Sound level meter to monitor the volume of audio
- Create audio visualizations
- Low-Latency Sound Playback eg:
- In response to user-input from keyboard/mouse etc: Code Example
- Collisions of objects in games
- JavaScript access to audio data
- Create custom audio processing effects
- Music synthesis
Example Code
Looping Sounds Without Gaps
var context = new webkitAudioContext() , source = context.createBufferSource() ; // Request & decode audio ... source.buffer = decoded_data; ... source.connect( context.destination ); source.loop = true; source.start( 0 );
Use Cases:
- Playing background music or ambience in a web game or application
- Creating repetitive game-sounds such as a car or plane engine
Demos:
Low Latency Playback: From User Input
document.addEventListener( 'keypress', function(){ var newSource = context.createBufferSource(); // Copy the buffer data from the loaded sound newSource.buffer = decoded_buffer_data; newSource.connect( context.destination ); newSource.start( 0 ); }, false );
Use Cases:
- Using the computer keyboard like a piano, to play musical notes.
- Firing gun-fire sound effects very quickly after pressing keys in a game.
Demos:
Audio Filters: Controlling Bass & Treble
var bass = context.createBiquadFilter(); // Set up the biquad filter node with a low-pass filter type bass.type = 3; bass.frequency.value = 440; bass.Q.value = 0; bass.gain.value = 0; // Update the biquad filter node when the bass slider is moved document .getElementById( 'bass-slider' ) .addEventListener( 'change', function( e ){ bass.gain.value = e.srcElement.value; }, false ) ;
Use Cases:
- Adding treble to a voice that seems muffled or "muddy"
- Allowing tone/eq control for music playback
- Creating sweeping filters for music synthesis
- Creating filter-effects for web-based game engines
Demos:
Automating Parameters Over Time
// Ramp the gain (volume) parameter up and down over time ( value, seconds ); source.gain.linearRampToValueAtTime( 0, 0 ); source.gain.linearRampToValueAtTime( 1, 1 ); source.start( 0 );
Use Cases:
- Making seamless mixes between video or audio tracks in a playlist
- Fading in and out sounds or cut-scenes in games
- Modulating sound sources for music synthesis
Demos: