Web Audio Method Chaining Sample

Available in Chrome 48+ | View on GitHub | Browse Samples

Background

Web Audio JavaScript syntax can be shortened and simplified with method chaining for the AudioNode.connect() and AudioParam.connect() automation methods.

This sample does the following:

  1. Creates an AudioContext.
  2. Creates an audio source node.
  3. Creates a gain node.
  4. Creates a filter node.
  5. Connects nodes from the audio source to the AudioContext destination.
  6. Plays sound!

Live Output

Audio playback:









  
    
      
    
  

  
    
JavaScript Snippet

  

  
    
// Handle cross-browser differences.
var context;
if (typeof AudioContext === 'function') {
  context = new AudioContext();
} else if (typeof webkitAudioContext === 'function') {
  context = new webkitAudioContext();
} else {
  ChromeSamples.setStatus('The Web Audio API is not supported in your browser');
}

if (context) {
  // Use the <audio> element to create the source node.
  var audioElement = document.querySelector('audio');
  var sourceNode = context.createMediaElementSource(audioElement);

  var gainNode = context.createGain();
  // Default gain is 1 (no change).
  // Less than 1 means audio is attenuated, and vice versa.
  gainNode.gain.value = 0.5;

  var filterNode = context.createBiquadFilter();
  // See https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#BiquadFilterNode-section
  filterNode.type = 'highpass';
  // Cutoff frequency: for highpass, audio is attenuated below this frequency.
  filterNode.frequency.value = 10000;

  sourceNode.connect(gainNode).connect(filterNode).connect(context.destination);
}