Part 4 - Mixing & Routing

Part 4 of this Web Audio API tutorial will show how to connect more than one oscillator to an audio node. Four oscillators will get connected to their specific gain node and these gain nodes will be connected to the masterVolumeNode which will go directly to the destination.

First the interaction:

Frequency of Oscillator1: 440.0 Hz
oscillator1Volume: 0.25
Frequency of Oscillator2: 440.0 Hz
oscillator2Volume: 0.25
Frequency of Oscillator3: 440.0 Hz
oscillator3Volume: 0.25
Frequency of Oscillator4: 440.0 Hz
oscillator4Volume: 0.25
masterVolume: 0.5

You can start and stop the sound with the corresponding buttons. The frequency and the volume of the oscillators can be manipulated separately and a master volume slider can be used.
The following diagram shows the connections between the used audio nodes:

Fig 1.

First the oscillator is created. Its type is set and it is started:


                                var oscillator1 = context.createOscillator();

                                oscillator1.type = 0;

                                oscillator1.start(0);

Now a gain node is created and the oscillator is connected to it.


                                var oscillator1VolumeNode = context.createGain();

                                oscillator1VolumeNode.gain.value = 0.25;

                                oscillator1.connect(oscillator1VolumeNode);

This is repeated for the other three oscillators. The masterVolumeNode will now be created and all the gain nodes (of the the oscillators) are connected to it:


                                var masterVolumeNode = context.createGain();

                                

                                oscillator1VolumeNode.connect(masterVolumeNode);

                                oscillator2VolumeNode.connect(masterVolumeNode);

                                oscillator3VolumeNode.connect(masterVolumeNode);

                                oscillator4VolumeNode.connect(masterVolumeNode);

Finally the last connection is now set with:


                                masterVolumeNode.connect(context.destination);

Now you can generalize this concept yourself and connect all kind of audio nodes of the Web Audio API together which will part of the future tutorials.