webaudio-examples
Code examples that accompany the MDN Web Audio documentation.
Serving the examples
To preview the examples, clone the repository and navigate to the example you want to view.
For example, if you have Python installed, you can use the following commands to serve the audio-analyser example:
cd audio-analyser
python3 -m http.serverThen navigate to http://localhost:8000 in your browser.
For more information on serving files locally using different languages or technologies, see Running a simple local HTTP server.
Repository contents
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 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 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 interface. Run example live.
Audio context states
The audiocontext-states directory contains a simple demo of the new Web Audio API AudioContext methods, including the states property and the close(), resume(), and suspend() methods. Run the demo live.
Audio worklet
The audioworklet directory contains an example showing how to use the AudioWorklet interface. See also the guide on background audio processing using AudioWorklet. Run the example live.
Compressor example
The compressor-example directory contains a simple demo to show usage of the Web Audio API BaseAudioContext.createDynamicsCompressor() method and 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() method can be used to output a stream - in this case to a 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() 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() 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 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 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 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() 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() 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 interface to process a loaded audio track, adding a little bit of white noise to each audio sample. See the live demo.
Spatialization
The spatialization directory contains an example of how the various properties of a 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 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 MediaStreamAudioSourceNode object. View example live.
Violent theremin
Violent theremin uses the Web Audio API to generate sound, and HTML5 canvas for a bit of pretty visualization. The colors generated depend on the pitch and gain of the current note, which are themselves dependent on the mouse pointer position.
You can view the demo live here.
Voice-change-O-matic
The voice-change-o-matic directory contains a Web Audio API-powered voice changer and visualizer.
You can view the demo live here.