Code examples that accompany the MDN Web Audio documentation
Switch branches/tags
Nothing to show
Clone or download
Latest commit 19ed5d0 Oct 18, 2018
Permalink
Failed to load latest commit information.
audio-analyser added audio-analyser Aug 3, 2018
audio-basics updating css to fix a couple of issues Oct 7, 2018
audio-buffer Merge https://github.com/mdn/audio-buffer into this repo. Original co… Feb 10, 2017
audio-param Merge https://github.com/mdn/audio-param.git into this repo. Original… Feb 13, 2017
audiocontext-states Merge https://github.com/mdn/audiocontext-states into this repo. Orig… Feb 13, 2017
compressor-example reduction has no value property, it is read-only float May 20, 2017
create-media-stream-destination Merge https://github.com/mdn/create-media-stream-destination into thi… Feb 13, 2017
decode-audio-data uncommenting out source.opp = true line, so that loopStart/loopEnd fu… Jan 29, 2018
iirfilter-node Merge pull request #22 from Rumyra/iir Oct 18, 2018
media-source-buffer Merge https://github.com/mdn/media-source-buffer into this repo. Orig… Feb 10, 2017
multi-track multi track demo Oct 17, 2018
offline-audio-context-promise Merge https://github.com/mdn/offline-audio-context-promise into this … Feb 13, 2017
offline-audio-context Merge https://github.com/mdn/offline-audio-context into this repo. Or… Feb 13, 2017
panner-node Merge https://github.com/mdn/panner-node into this repo. Original cod… Feb 13, 2017
script-processor-node Merge https://github.com/mdn/script-processor-node into this repo. Or… Feb 10, 2017
spacialization few tweaks Oct 11, 2018
step-sequencer nits Oct 17, 2018
stereo-panner-node Merge https://github.com/mdn/stereo-panner-node into this repo. Orgin… Feb 13, 2017
stream-source-buffer Merge https://github.com/mdn/stream-source-buffer into this repo. Ori… Feb 13, 2017
LICENSE Updating license to CC-0 Mar 21, 2017
README.md adding step-sequencer to README Oct 4, 2018

README.md

webaudio-examples

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

The "audio-analyser" directory contains a very simple example showing a graph visualization of audio drawn with data taken from an AnalyserNode. Run the demo live.

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.

The "audio-buffer" directory contains a very simple example showing how to use an audio buffer in Web Audio API. Run the demo live.

The "audio-param" directory contains some simple examples showing how to use the methods of the Web Audio API AudioParam interface. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/AudioParam. Run example live.

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

The "compressor-example" directory contains a simple demo to show usage of the Web Audio API createDynamicsCompressor() method and DynamicCompressorNode. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createDynamicsCompressor. Run the example live.

The "create-media-stream-destination" directory contains a simple example showing how Web Audio API AudioContext.createMediaStreamDestination which 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.

The "decode-audio-data" directory contains a simple example demonstrating usage of the Web Audio API decodeAudioData() method. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/decodeAudioData. View example live.

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

The "media-source-buffer" directory contains a simple example demonstrating usage of the Web Audio API AudioContext.createMediaElementSource() method. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource or view the demo live.

The "offline-audio-context" directory contains a simple example to show how a Web Audio API OfflineAudioContext object 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.

The "offline-audio-context-promise" directory contains a simple example to show how a Web Audio API OfflineAudioContext object 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/startRendering(promise). Run the example live.

The "panner-node" directory contains a demo to show basic usage of a Web Audio API PannerNode to control audio spatialisation. See https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createPanner for more details. Run the example live.

The "script-processor-node" directory contains a simple demo showing how to use the Web Audio API's ScriptProcessorNode to process a loaded audio track, adding a little bit of white noise to each audio sample. For more information see ScriptProcessorNode documentation and 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. See the live demo also.

The "stereo-panner-node" directory contains a simple example to show how the Web Audio API StereoPannerNode can be used to pan an audio stream. See https://developer.mozilla.org/en-US/docs/Web/API/StereoPannerNode for more details. Run the example live.

The "stream-source-buffer" directory contains a simple example demonstrating usage of the Web Audio API AudioContext.createMediaElementSource() method. For more information, see https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamSource. View example live.