webaudio-examples

Code examples that accompany the MDN Web Audio documentation https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

Audio analyser

The audio-analyser directory contains a very simple example showing a graphical visualization of an audio signal drawn with data taken from an [AnalyserNode](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode) interface. Run the demo live.

Audio basics

The audio-basics directory contains a fun example showing a retro-style “boombox” that allows audio to be played, stereo-panned, and volume-adjusted. Run the demo live.

Audio buffer

The audio-buffer directory contains a very simple example showing how to use an [AudioBuffer](https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer) interface in the Web Audio API. Run the demo live.

Audio param

The audio-param directory contains some simple examples showing how to use the methods of the Web Audio API [AudioParam](https://developer.mozilla.org/en-US/docs/Web/API/AudioParam) interface. Run example live.

Audio context states

The audiocontext-states directory contains a simple demo of the new Web Audio API [AudioContext](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) methods, including the states property and the close(), resume(), and suspend() methods. Run the demo live.

Compressor example

The compressor-example directory contains a simple demo to show usage of the Web Audio API [BaseAudioContext.createDynamicsCompressor()](https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createDynamicsCompressor) method and [DynamicsCompressorNode](https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode) interface. Run the example live.

Create media stream destination

The create-media-stream-destination directory contains a simple example showing how the Web Audio API [AudioContext.createMediaStreamDestination()](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamDestination) method can be used to output a stream - in this case to a [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) instance - to output a sinewave to an opus file. Run the demo live.

Decode audio data

The decode-audio-data directory contains a simple example demonstrating usage of the Web Audio API [BaseAudioContext.decodeAudioData()](https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/decodeAudioData) method. View example live.

IIR filter node

The iirfilter-node directory contains an example showing usage of an IIRFilterNode interface. Run the demo live.

Media source buffer

The media-source-buffer directory contains a simple example demonstrating usage of the Web Audio API [AudioContext.createMediaElementSource()](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource) method. View the demo live.

Multi track

The multi-track directory contains an example of connecting separate independently-playable audio tracks to a single [AudioDestinationNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode) interface. Run the example live.

Offline audio context

The offline-audio-context directory contains a simple example to show how a Web Audio API [OfflineAudioContext](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) interface can be used to rapidly process/render audio in the background to create a buffer, which can then be used in any way you please. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext. Run example live.

Offline audio context promise

The offline-audio-context-promise directory contains a simple example to show how a Web Audio API [OfflineAudioContext](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) interface can be used to rapidly process/render audio in the background to create a buffer, which can then be used in any way you please. Run the example live.

Output timestamp

The output-timestamp directory contains an example of how the [AudioContext.getOutputTimestamp()](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/getOutputTimestamp) property can be used to log contextTime and performanceTime to the console. Try the demo live.

Panner node

The panner-node directory contains a demo to show basic usage of the Web Audio API [BaseAudioContext.createPanner()](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createPanner) method to control audio spatialization. Run the example live.

Script processor node

The script-processor-node directory contains a simple demo showing how to use the Web Audio API’s [ScriptProcessorNode](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode) interface to process a loaded audio track, adding a little bit of white noise to each audio sample. See the live demo.

Spacialization

The spacialization directory contains an example of how the various properties of a [PannerNode](https://developer.mozilla.org/en-US/docs/Web/API/PannerNode) interface can be adjusted to emulate sound in a three-dimensional space. For more information see Web audio spatialization basics. Try the live demo.

Step sequencer

The step-sequencer directory contains a simple step-sequencer that loops and manipulates sounds based on a dial-up modem. For more information see Advanced techniques: creating sound, sequencing, timing, scheduling. See the live demo also.

Stereo panner node

The stereo-panner-node directory contains a simple example to show how the Web Audio API [StereoPannerNode](https://developer.mozilla.org/en-US/docs/Web/API/StereoPannerNode) interface can be used to pan an audio stream. Run the example live.

Stream source buffer

The stream-source-buffer directory contains a simple example demonstrating usage of the Web Audio API [AudioContext.createMediaElementSource()](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource) method. View example live.