Using the Web Audio API

IN THIS ARTICLE

1. Examples
2. Basic concepts
   1. Creating an audio context
   2. Creating an audio source
   3. Linking source and destination nodes together
   4. Playing sound and setting a pitch
   5. A simple canvas visualization
   6. Muting the theremin
3. Other node options
   1. Wave shaper nodes
   2. Biquad filter
4. Other things inside Web Audio API

The Web Audio API provides a simple yet powerful mechanism to implement and manipulate audio content inside web applications. It allows you to perform complex audio mixing, utilize effects, panning, and more. This article explains the basics of using the Web Audio API, and provides some simple API use examples.

The Web Audio API does not replace the <audio> media element, but rather complements it, just like <canvas> coexists alongside the <img> element. Your use case will determine what tools you use to implement audio. If you simply want to control playback of an audio track, the <audio> media element provides a better, quicker solution than the Web Audio API. If you want to carry out more complex audio processing, as well as playback, the Web Audio API provides much more power and control.

A powerful feature of the Web Audio API is that it does not have a strict "sound call limitation". For example, there is no ceiling of 32 or 64 sound calls at one time. Some processors may be capable of playing more than 1,000 simultaneous sounds without stuttering.

Examples

The following example applications demonstrate how to use the Web Audio API. Many of the example applications undergo routine improvements and additions. Please feel free to add to the examples and suggest improvements!

Our first example application is a custom tool called the Voice-change-O-matic, a fun voice manipulator and sound visualization web app that allows you to choose different effects and visualizations. The application is fairly rudimentary, but it demonstrates the simultaneous use of multiple Web Audio API features. (