webaudio-examples

Audio analyser

Run the demo live.

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.

Audio basics

Run the demo live](https://bgoonz.github.io/Web-Audio-Api-Example/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. [

Audio buffer

Run the demo live.

**The audio-buffer directory contains a very simple example showing how to use an AudioBuffer interface in the Web Audio API. [

Audio param

Run example live.

The audio-param directory contains some simple examples showing how to use the methods of the Web Audio API AudioParam interface.

Audio context states

Run the demo live.

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.

Audio worklet

Run the example live.

**The audioworklet directory contains an example showing how to use the AudioWorklet interface. See also the guide on background audio processing using AudioWorklet. [

Compressor example

Run the example live.

The compressor-example directory contains a simple demo to show usage of the Web Audio API BaseAudioContext.createDynamicsCompressor() method and DynamicsCompressorNode interface.

Create media stream destination

Run the demo live.

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.

Decode audio data

View example live.

The decode-audio-data directory contains a simple example demonstrating usage of the Web Audio API BaseAudioContext.decodeAudioData() method.

IIR filter node

Run the demo live.

The iirfilter-node directory contains an example showing usage of an IIRFilterNode interface.

Media source buffer

View the demo live.

The media-source-buffer directory contains a simple example demonstrating usage of the Web Audio API AudioContext.createMediaElementSource() method.

Multi track

Run the example live.

The multi-track directory contains an example of connecting separate independently-playable audio tracks to a single AudioDestinationNode interface.

Offline audio context

Run example live.

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.

Offline audio context promise

Run the example live.

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.

Output timestamp

Try the demo live.

The output-timestamp directory contains an example of how the AudioContext.getOutputTimestamp() property can be used to log contextTime and performanceTime to the console.

Panner node

. Run the example live.

**The panner-node directory contains a demo to show basic usage of the Web Audio API BaseAudioContext.createPanner() method to control audio spatialization

Script processor node

See the live demo.

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.

Spacialization

Try the live demo.

The spacialization 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.

Step sequencer

See the live demo

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. also.

Stereo panner node

Run the example live.

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.

Stream source buffer

View example live.

**The stream-source-buffer directory contains a simple example demonstrating usage of the Web Audio API AudioContext.createMediaElementSource() method.