Part 1 - Getting started

Welcome to this tutorial about the Web Audio API.
It is a High Level API that delivers processing and synthesizing functionality for audio material.
A lot of features are implemented for direct use with JavaScript. The Web Audio API provides built-in and customizable functionality within the following browsers: Firefox.
For the Webkit xor Blink based browsers (Chrome, Chromium, Safari, Opera, ...) the vendor prefix "webkit" must be set (webkitAudioContext).
This interface does not only bring fun for specialized sound programmers because it can be used in many situations where consistent audio support is needed.
Think of:
  • accelerated 3D games with realtime sound processing
  • realtime video chat with
  • dedicated sound effects for musical instruments (Synths, guitars, ...)
  • ...

You want to enter this world? Then it is time to start.
This introducing part is about the built-in oscillators because these provide an easy entrance to the basic concepts of the Web Audio API.
The first you need is the AudioContext provided by the browser via JavaScript.
To get access to the Web Audio API the standard API gives the built-in audio context via the following code:

var context = new AudioContext();

Now via the variable context that holds the audio context you can access all the provided functionality.
The questions are now: What is an oscillator and how can it be used? An oscillator in this context is a basic synthesizer that provides sounds based on .
The code

var oscillator = context.createOscillator();

creates an oscillator over the audio context. The method createOscillator is implemented in the Web Audio API and gives back an oscillator object that is now saved in the variable oscillator.
With

oscillator.type = "sine";

the waveform of the oscillator is set to type "sine" (which is also the default type). The following standard types are possible:
  • sine
  • square
  • sawtooth
  • triangle

It is also possible to use custom wavetables which are introduced in part 3 of the oscillator tutorial.

Now

oscillator.start(0);

starts the oscillator with a standard frequency of 440.0 Hz.
An input value of 0 results in starting the oscillator immediately. A higher value than 0 will result in a delay before starting the oscillator. The input value is interpreted as time in milliseconds.
But still no sound occurs. To hear the oscillator working it must be connected to the destination of the audio context:

oscillator.connect(context.destination);

Here the oscillator has a method called connect to route itself to the built-in destination. All audio sources that are connected to it can be heard if they are activated.
Source Desti- nation
Fig. 1

To stop the oscillator you can either disconnect it from the destination or deactivate it with the stop-method. If you choose to disconnect the oscillator it is still working. You can reconnect it with the destination to hear it again. If you deactivate the oscillator it is automatically disconnected from the destination. You cannot reactivate it again with the start-method. You have to create a new oscillator. If you play many notes "at once" it is better to start a new oscillator for every note that shall be played. Optimized garbage collection and native support of the browser make the performance here.
Here the disconnect-method:

oscillator.disconnect();

And now the stop-method:

oscillator.stop(0);

The next code brings all the basic stuff together. In this example the oscillator is created only once and reused to show how the concept of disconnecting and reconnecting works.

// create audio context
var context = new AudioContext();

// create oscillator
var oscillator = context.createOscillator();

// set oscillator to type sine
oscillator.type = "sine";

// activate the oscillator
oscillator.start(0);

// method to connect the oscillator with the destination
function startTone() {
    oscillator.connect(context.destination);
}

// method to disconnect the oscillator from the destination
function stopTone() {
    oscillator.disconnect();
}

// method to change the type of the oscillator with the input value
function changeType(value) {
    oscillator.type = value;
}


The Start-button toggles the startTone-method and the Stop-button the stopTone-method. The Type-buttons start the changeType-method with the waveform corresponding to the input value.