The Web Audio API involves handling audio operations inside anaudio context, and has been designed to allowmodular routing. Basic audio operations are performed withaudio nodes, which are linked together to form anaudio routing graph. Several sources — with different types of channel layout — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.

Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such asOscillatorNode), or they can be recordings from sound/video files (likeAudioBufferSourceNode andMediaElementAudioSourceNode) and audio streams (MediaStreamAudioSourceNode). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.

Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case withGainNode). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination (BaseAudioContext.destination), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.

A simple, typical workflow for web audio would look something like this:

1. Create audio context
2. Inside the context, create sources — such as<audio>, oscillator, stream
3. Create effects nodes, such as reverb, biquad filter, panner, compressor
4. Choose final destination of audio, for example your system speakers
5. Connect the sources up to the effects, and the effects to the destination.

Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.

The Web Audio API also allows us to control how audio isspatialized. Using a system based on asource-listener model, it allows control of thepanning model and deals withdistance-induced attenuation induced by a moving source (or moving listener).

The Web Audio API can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer.

It can be used to incorporate audio into your website or application, byproviding atmosphere like futurelibrary.no, orauditory feedback on forms. However, it can also be used to createadvanced interactive instruments. With that in mind, it is suitable for both developers and musicians alike.

We have asimple introductory tutorial for those that are familiar with programming but need a good introduction to some of the terms and structure of the API.

There's also aBasic Concepts Behind Web Audio API article, to help you understand the way digital audio works, specifically in the realm of the API. This also includes a good introduction to some of the concepts the API is built upon.

Learning coding is like playing cards — you learn the rules, then you play, then you go back and learn the rules again, then you play again. So if some of the theory doesn't quite fit after the first tutorial and article, there's anadvanced tutorial which extends the first one to help you practice what you've learnt, and apply some more advanced techniques to build up a step sequencer.

We also have other tutorials and comprehensive reference material available that covers all features of the API. See the sidebar on this page for more.

If you are more familiar with the musical side of things, are familiar with music theory concepts, want to start building instruments, then you can go ahead and start building things with the advanced tutorial and others as a guide (the above-linked tutorial covers scheduling notes, creating bespoke oscillators and envelopes, as well as an LFO among other things.)

If you aren't familiar with the programming basics, you might want to consult some beginner's JavaScript tutorials first and then come back here — see ourBeginner's JavaScript learning module for a great place to begin.

The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.

General containers and definitions that shape audio graphs in Web Audio API usage.

AudioContext

TheAudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by anAudioNode. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create anAudioContext before you do anything else, as everything happens inside a context.

AudioNode

TheAudioNode interface represents an audio-processing module like anaudio source (e.g., an HTML<audio> or<video> element),audio destination,intermediate processing module (e.g., a filter likeBiquadFilterNode, orvolume control likeGainNode).

AudioParam

TheAudioParam interface represents an audio-related parameter, like one of anAudioNode. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.

AudioParamMap

Provides a map-like interface to a group ofAudioParam interfaces, which means it provides the methodsforEach(),get(),has(),keys(), andvalues(), as well as asize property.

BaseAudioContext

TheBaseAudioContext interface acts as a base definition for online and offline audio-processing graphs, as represented byAudioContext andOfflineAudioContext respectively. You wouldn't useBaseAudioContext directly — you'd use its features via one of these two inheriting interfaces.

Theended event

Theended event is fired when playback has stopped because the end of the media was reached.

Interfaces that define audio sources for use in the Web Audio API.

AudioScheduledSourceNode

TheAudioScheduledSourceNode is a parent interface for several types of audio source node interfaces. It is anAudioNode.

OscillatorNode

TheOscillatorNode interface represents a periodic waveform, such as a sine or triangle wave. It is anAudioNode audio-processing module that causes a givenfrequency of wave to be created.

AudioBuffer

TheAudioBuffer interface represents a short audio asset residing in memory, created from an audio file using theBaseAudioContext.decodeAudioData method, or created with raw data usingBaseAudioContext.createBuffer. Once decoded into this form, the audio can then be put into anAudioBufferSourceNode.

AudioBufferSourceNode

TheAudioBufferSourceNode interface represents an audio source consisting of in-memory audio data, stored in anAudioBuffer. It is anAudioNode that acts as an audio source.

MediaElementAudioSourceNode

TheMediaElementAudioSourceNode interface represents an audio source consisting of an HTML<audio> or<video> element. It is anAudioNode that acts as an audio source.

MediaStreamAudioSourceNode

TheMediaStreamAudioSourceNode interface represents an audio source consisting of aMediaStream (such as a webcam, microphone, or a stream being sent from a remote computer). If multiple audio tracks are present on the stream, the track whoseid comes first lexicographically (alphabetically) is used. It is anAudioNode that acts as an audio source.

MediaStreamTrackAudioSourceNode

A node of typeMediaStreamTrackAudioSourceNode represents an audio source whose data comes from aMediaStreamTrack. When creating the node using thecreateMediaStreamTrackSource() method to create the node, you specify which track to use. This provides more control thanMediaStreamAudioSourceNode.

Interfaces for defining effects that you want to apply to your audio sources.

BiquadFilterNode

TheBiquadFilterNode interface represents a simple low-order filter. It is anAudioNode that can represent different kinds of filters, tone control devices, or graphic equalizers. ABiquadFilterNode always has exactly one input and one output.

ConvolverNode

TheConvolverNode interface is anAudioNode that performs a Linear Convolution on a givenAudioBuffer, and is often used to achieve a reverb effect.

DelayNode

TheDelayNode interface represents adelay-line; anAudioNode audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.

DynamicsCompressorNode

TheDynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.

GainNode

TheGainNode interface represents a change in volume. It is anAudioNode audio-processing module that causes a givengain to be applied to the input data before its propagation to the output.

WaveShaperNode

TheWaveShaperNode interface represents a non-linear distorter. It is anAudioNode that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.

PeriodicWave

Describes a periodic waveform that can be used to shape the output of anOscillatorNode.

IIRFilterNode

Implements a generalinfinite impulse response (IIR) filter; this type of filter can be used to implement tone-control devices and graphic equalizers as well.

Once you are done processing your audio, these interfaces define where to output it.

AudioDestinationNode

TheAudioDestinationNode interface represents the end destination of an audio source in a given context — usually the speakers of your device.

MediaStreamAudioDestinationNode

TheMediaStreamAudioDestinationNode interface represents an audio destination consisting of aWebRTCMediaStream with a singleAudioMediaStreamTrack, which can be used in a similar way to aMediaStream obtained fromgetUserMedia(). It is anAudioNode that acts as an audio destination.

If you want to extract time, frequency, and other data from your audio, theAnalyserNode is what you need.

AnalyserNode

TheAnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.

To split and merge audio channels, you'll use these interfaces.

ChannelSplitterNode

TheChannelSplitterNode interface separates the different channels of an audio source out into a set ofmono outputs.

ChannelMergerNode

TheChannelMergerNode interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.

These interfaces allow you to add audio spatialization panning effects to your audio sources.

AudioListener

TheAudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.

PannerNode

ThePannerNode interface represents the position and behavior of an audio source signal in 3D space, allowing you to create complex panning effects.

StereoPannerNode

TheStereoPannerNode interface represents a simple stereo panner node that can be used to pan an audio stream left or right.

Using audio worklets, you can define custom audio nodes written in JavaScript orWebAssembly. Audio worklets implement theWorklet interface, a lightweight version of theWorker interface.

AudioWorklet

TheAudioWorklet interface is available through theAudioContext object'saudioWorklet, and lets you add modules to the audio worklet to be executed off the main thread.

AudioWorkletNode

TheAudioWorkletNode interface represents anAudioNode that is embedded into an audio graph and can pass messages to the correspondingAudioWorkletProcessor.

AudioWorkletProcessor

TheAudioWorkletProcessor interface represents audio processing code running in aAudioWorkletGlobalScope that generates, processes, or analyzes audio directly, and can pass messages to the correspondingAudioWorkletNode.

AudioWorkletGlobalScope

TheAudioWorkletGlobalScope interface is aWorkletGlobalScope-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worklet thread rather than on the main thread.

Obsolete: script processor nodes

Before audio worklets were defined, the Web Audio API used theScriptProcessorNode for JavaScript-based audio processing. Because the code runs in the main thread, they have bad performance. TheScriptProcessorNode is kept for historic reasons but is marked as deprecated.

ScriptProcessorNodeDeprecated

TheScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is anAudioNode audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing theAudioProcessingEvent interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.

audioprocess (event)Deprecated

Theaudioprocess event is fired when an input buffer of a Web Audio APIScriptProcessorNode is ready to be processed.

AudioProcessingEventDeprecated

TheAudioProcessingEvent represents events that occur when aScriptProcessorNode input buffer is ready to be processed.

It is possible to process/render an audio graph very quickly in the background — rendering it to anAudioBuffer rather than to the device's speakers — with the following.

OfflineAudioContext

TheOfflineAudioContext interface is anAudioContext interface representing an audio-processing graph built from linked togetherAudioNodes. In contrast with a standardAudioContext, anOfflineAudioContext doesn't really render the audio but rather generates it,as fast as it can, in a buffer.

complete (event)

Thecomplete event is fired when the rendering of anOfflineAudioContext is terminated.

OfflineAudioCompletionEvent

TheOfflineAudioCompletionEvent represents events that occur when the processing of anOfflineAudioContext is terminated. Thecomplete event uses this interface.

Advanced techniques: Creating and sequencing audio

In this tutorial, we're going to cover sound creation and modification, as well as timing and scheduling. We will introduce sample loading, envelopes, filters, wavetables, and frequency modulation. If you're familiar with these terms and looking for an introduction to their application with the Web Audio API, you've come to the right place.

Background audio processing using AudioWorklet

This article explains how to create an audio worklet processor and use it in a Web Audio application.

Basic concepts behind Web Audio API

This article explains some of the audio theory behind how the features of the Web Audio API work to help you make informed decisions while designing how your app routes audio. If you are not already a sound engineer, it will give you enough background to understand why the Web Audio API works as it does.

Controlling multiple parameters with ConstantSourceNode

This article demonstrates how to use aConstantSourceNode to link multiple parameters together so they share the same value, which can be changed by setting the value of theConstantSourceNode.offset parameter.

Example and tutorial: Simple synth keyboard

This article presents the code and working demo of a video keyboard you can play using the mouse. The keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the main gain using a volume slider beneath the keyboard. This example makes use of the following Web API interfaces:AudioContext,OscillatorNode,PeriodicWave, andGainNode.

Using IIR filters

TheIIRFilterNode interface of theWeb Audio API is anAudioNode processor that implements a generalinfinite impulse response (IIR) filter; this type of filter can be used to implement tone control devices and graphic equalizers, and the filter response parameters can be specified, so that it can be tuned as needed. This article looks at how to implement one, and use it in a simple example.

Using the Web Audio API

Let's take a look at getting started with theWeb Audio API. We'll briefly look at some concepts, then study a simple boombox example that allows us to load an audio track, play and pause it, and change its volume and stereo panning.

Visualizations with Web Audio API

One of the most interesting features of the Web Audio API is the ability to extract frequency, waveform, and other data from your audio source, which can then be used to create visualizations. This article explains how, and provides a couple of basic use cases.

Web Audio API best practices

There's no strict right or wrong way when writing creative code. As long as you consider security, performance, and accessibility, you can adapt to your own style. In this article, we'll share a number ofbest practices — guidelines, tips, and tricks for working with the Web Audio API.

Web audio spatialization basics

As if its extensive variety of sound processing (and other) options wasn't enough, the Web Audio API also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3D game.The official term for this isspatialization, and this article will cover the basics of how to implement such a system.

You can find a number of examples at ourwebaudio-examples repo on GitHub.

• Basic concepts behind Web Audio API
• Using the Web Audio API
• Advanced techniques: creating sound, sequencing, timing, scheduling
• Autoplay guide for media and Web Audio APIs
• Using IIR filters
• Visualizations with Web Audio API
• Web audio spatialization basics
• Controlling multiple parameters with ConstantSourceNode
• Mixing Positional Audio and WebGL (2012)
• Developing Game Audio with the Web Audio API (2012)

• Tones: a simple library for playing specific tones/notes using the Web Audio API.
• Tone.js: a framework for creating interactive music in the browser.
• howler.js: a JS audio library that defaults toWeb Audio API and falls back toHTML Audio, as well as providing other useful features.
• Mooog: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.
• XSound: Web Audio API Library for Synthesizer, Effects, Visualization, Recording, etc.
• OpenLang: HTML video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (source on GitHub)
• Pts.js: Simplifies web audio visualization (guide)

• Web media technologies
• Guide to media types and formats on the web