From Audio WG Wiki
Jump to: navigation, search

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:

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


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.


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
    .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


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