Skip to content
October 5, 2015 / Danii Oliver

Starting with Web Audio API

With the use of crossfading through the Web Audio API and a single video file I will be creating an interactive experience that brings a little bit of magic to tablet devices with the touch of your finger. My goal is to swap between to separate Audio Visual assets in an extremely seamless way.

Further reading on the Web Audio API here.

Getting Started:

First:

Initialize an AudioContext. Only one is needed and will serve the needs of multiple audio files and actions.

var context;
window.addEventListener('load', init, false);
function init() {
  try {
    // Fix up for prefixing
    window.AudioContext = window.AudioContext||window.webkitAudioContext;
    context = new AudioContext();
  }
  catch(e) {
    alert('Web Audio API is not supported in this browser');
  }
 

or simply

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

Second:

We have to create connections like connecting wires to an amplifier or sender to receiver one by one.

Create and AudioContext
Give the AudioContext buffered content to create a full SOURCE
Connect the SOURCE to the GAIN
Connect GAIN to OUTPUT for Simple Audio
or
SOURCE to EFFECT, EFFECT to GAIN and GAIN to OUTPUT

Process:

* SRC –> GAIN –> OUTPUT

* SRC –> EFFECT –> GAIN –> OUTPUT


More…

I will be documenting my high level tasks for the purpose of understanding but these things will not need to be done as a library with everything in place will be the outcome of all of this.

If you wish to understand it all read the next posts [ Read On >> ]

If you wish to dive in and only want to implement this one functionality without improving on it [ Skip Ahead >> (Coming Soon) ]

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: