The Web Audio API allows you to read, manipulate, and synthesize sound within a web application. Generally speaking, you can work with three different objects: sources, effect filters, and the analyzer.

The sources

Sources can be any audio source you could think of (microphone, soundcloud, beacon etc.). We can also notice the possibility of creating a wave sinusoidal (in this example, the frequency of the sinusoid created depends on the position of the cursor http://mdn.github.io/violent-theremin/).
 

Effect filters

We can obtain very developed effects on the sound as this list of examples shows: https://webaudiodemos.appspot.com/input/index.html.
The standard signal processing filters are also present (for those who know: gain, low pass, high pass, attenuation, etc).
 

the analyzer

The analyzer provides two pieces of information in real time: the output frequency table (which makes it possible to represent the sound spectrum of the sound played http://webaudioapi.com/samples/visualizer/ ) and the shape of the wave.
 

Functioning

All these components are organized as nodes to be connected together.
 

Let's take the simplest possible example, we want to play the note A (=440Hz) and be able to change the volume.

var audioCtxt = new window.AudioContext(), // Création du context audio
    sinusoide = audioCtxt.createOscillator(), // Création de la sinusoide
    volumeCtrl = audioCtxt.createGain(); // Création du filtre qui controle le volume
sinusoide.frequency.value = 440;
volumeCtrl.gain.value = 0.07;
sinusoide.start(0);
//Créations des connexions
sinusoide.connect(volumeCtrl);
volumeCtrl.connect(audioCtxt.destination);
// On baisse le volume toutes les 50 millisecondes
monInterval = setInterval(function(){
    volumeCtrl.gain.value -= 0.001;
    if(volumeCtrl.gain.value < 0) {
        volumeCtrl.gain.value = 0;
        clearInterval(monInterval);
    }
}, 50);

You can create and connect at any time as many nodes as you want to one or more destinations.
Apart from the transposition of music and signal processing software on the internet, the exploitation of this API is (largely) only at the experimental stage (http://bruno-simon.com/lab/music-spinners/) and playful applications (http://dinahmoelabs.com/plink).
We can still imagine that these tools coupled with all the environment offered by the web can give rise to very interesting and innovative projects.
I have a little trouble imagining a direct application to enhance the UX of web pages where adding sounds remains problematic. On the other hand, there is no doubt that this API will be very useful for experiential sites (http://www.unseen-music.com/yume/).
Grégoire Humbert, Front-end Developer @ UX-Republic
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC is a service company specializing in JavaScript development. We are an approved training center. Find all our technical training on our partner site dedicated to Training” btn_label=”Our training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]