View source for 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: [[#Looping_Sounds_Without_Gaps| Code Example]]
*Creating seamless playlists
*FadeIns / FadeOuts / Crossfades
*Add filters to audio such as Bass/Treble/EQ control: [[#Audio_Filters_Bass_Treble| Code Example]]
*Automating volume, pan, pitch and speed parameters over time: [[#Automating_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: [[#Low_Latency_From_User_Input| Code Example]]
**Collisions of objects in games
*JavaScript access to audio data
**Create custom audio processing effects
**Music synthesis

=Example Code=

===<div id="Looping_Sounds_Without_Gaps">Looping Sounds Without Gaps</div>===
 <nowiki>
  var context = new webkitAudioContext()
    , source  = context.createBufferSource()
    ;

  // Request & decode audio
  ... source.buffer = decoded_data; ...

  source.connect( context.destination );
  source.loop = true;
  source.start( 0 );
</nowiki>

''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:''
*[http://f1lt3r.com/w3caudio/web-audio-api/basic-examples/looping-sounds-without-gaps.html Looping Sounds Without Gaps]

===<div id="Low_Latency_From_User_Input">Low Latency Playback: From User Input</div>===

 <nowiki>
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 );
</nowiki>

''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:''
*[http://f1lt3r.com/w3caudio/web-audio-api/basic-examples/low-latency-playback-user-input.html Low Latency Playback From User Input]



===<div id="Audio_Filters_Bass_Treble">Audio Filters: Controlling Bass & Treble</div>===

 <nowiki>
  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 )
  ;
</nowiki>

''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:''
*[http://f1lt3r.com/w3caudio/web-audio-api/basic-examples/audio-filters-bass-treble-control.html Audio Filters: Controlling Bass & Treble]




===<div id="Automating_Parameters_Over_Time">Automating Parameters Over Time</div>===

 <nowiki>
  // 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 );
</nowiki>

''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:''
*[http://f1lt3r.com/w3caudio/web-audio-api/basic-examples/automating-the-volume-over-time.html Automating The Volume Over Time]