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:

• Looping Sounds Without Gaps

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:

• Low Latency Playback From User Input

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:

• Audio Filters: Controlling Bass & Treble

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:

• Automating The Volume Over Time