standardized-audio-context

standardized-audio-context

A cross-browser wrapper for the Web Audio API which aims to closely follow the standard. This package provides a subset (although it's almost complete) of the Web Audio API which works in a reliable and consistent way in every supported browser. In contrast to other popular polyfills standardized-audio-context does not patch or modify anything on the global scope. In other words, it does not cause any side effects. It can therefore be used safely inside of libraries. It's what's known as a ponyfill.

One of the goals of standardized-audio-context is to only implement missing functionality and to avoid rewriting built-in features whenever possible. Please take a look at the paragraph about the browser support below for more information.

There are some things which cannot be faked in a way that makes them as performant as they could be when implemented natively. The most prominent amongst those things is the AudioWorklet. Please have a look at the list of all supported methods below for more detailed information.

Usage

The standardized-audio-context is available on npm and can be installed as usual.

npm install standardized-audio-context

You can then import the AudioContext and OfflineAudioContext like this:

import { AudioContext, OfflineAudioContext } from 'standardized-audio-context';

It is also possible to load standardized-audio-context with a service like jspm. The import statement from above would then need to be changed to point to a URL.

import { AudioContext, OfflineAudioContext } from 'https://jspm.dev/standardized-audio-context';

Once the AudioContext and/or OfflineAudioContext are imported they can be used in the same way as their native counterparts. The following snippet will for example produce a nice and clean (as well as annoying) sine wave.

import { AudioContext } from 'standardized-audio-context';

const audioContext = new AudioContext();
const oscillatorNode = audioContext.createOscillator();

oscillatorNode.connect(audioContext.destination);

oscillatorNode.start();

An alternative approach would be to use the AudioNode constructors (the OscillatorNode constructor in this case) instead of the factory methods.

import { AudioContext, OscillatorNode } from 'standardized-audio-context';

const audioContext = new AudioContext();
const oscillatorNode = new OscillatorNode(audioContext);

oscillatorNode.connect(audioContext.destination);

oscillatorNode.start();

API

AudioContext

This is an almost complete implementation of the AudioContext interface. It only misses the createScriptProcessor() method which is deprecated anyway.

The AudioContext implements the following TypeScript interface.

…

The properties and methods are described in greater detail below.

OfflineAudioContext

This is an almost complete implementation of the OfflineAudioContext interface. It only misses the createScriptProcessor() method which is deprecated anyway.

It implements the following TypeScript interface.

…

The properties and methods are described in greater detail below.

audioWorklet

The audioworklet property is only available in a SecureContext.

listener

⚠️ Firefox and Safari up to version 14.0.1 do not support modifying the listener via AudioParams. Therefore calling any of the scheduling functions on the AudioParams of a listener of an OfflineAudioContext throws a NotSupportedError.

createAnalyser() / AnalyserNode

This is an implementation of the createAnalyser() factory method. The AnalyserNode constructor may be used as an alternative.

createBiquadFilter() / BiquadFilterNode

This is an implementation of the createBiquadFilter() factory method. The BiquadFilterNode constructor may be used as an alternative.

createBuffer() / AudioBuffer

This is an implementation of the createBuffer() factory method. The AudioBuffer constructor may be used as an alternative.

createBufferSource() / AudioBufferSourceNode

This is an implementation of the createBufferSource() factory method. The AudioBufferSourceNode constructor may be used as an alternative.

createChannelMerger() / ChannelMergerNode

This is an implementation of the createChannelMerger() factory method. The ChannelMergerNode constructor may be used as an alternative.

createChannelSplitter() / ChannelSplitterNode

This is an implementation of the createChannelSplitter() factory method. The ChannelSplitterNode constructor may be used as an alternative.

createConstantSource() / ConstantSourceNode

This is an implementation of the createConstantSource() factory method. The ConstantSourceNode constructor may be used as an alternative.

createConvolver() / ConvolverNode

This is an implementation of the createConvolver() factory method. The ConvolverNode constructor may be used as an alternative.

createDelay() / DelayNode

This is an implementation of the createDelay() factory method. The DelayNode constructor may be used as an alternative.

⚠️ The delayTime AudioParam can't be set to very small values in any browser except Firefox.

createDynamicsCompressor() / DynamicsCompressorNode

This is an implementation of the createDynamicsCompressor() factory method. The DynamicsCompressorNode constructor may be used as an alternative.

createGain() / GainNode

This is an implementation of the createGain() factory method. The GainNode constructor may be used as an alternative.

createIIRFilter() / IIRFilterNode

This is an implementation of the createIIRFilter() factory method. The IIRFilterNode constructor may be used as an alternative.

createMediaElementSource() / MediaElementAudioSourceNode

This is an implementation of the createMediaElementSource() factory method. The MediaElementAudioSourceNode constructor may be used as an alternative.

It does only work with an AudioContext but not with an OfflineAudioContext.

createMediaStreamDestination() / MediaStreamAudioDestinationNode

This is an implementation of the createMediaStreamDestination() factory method. The MediaStreamAudioDestinationNode constructor may be used as an alternative.

It does only work with an AudioContext but not with an OfflineAudioContext.

createMediaStreamSource() / MediaStreamAudioSourceNode

This is an implementation of the createMediaStreamSource() factory method. The MediaStreamAudioSourceNode constructor may be used as an alternative.

It does only work with an AudioContext but not with an OfflineAudioContext.

createMediaStreamTrackSource() / MediaStreamTrackAudioSourceNode

This is an implementation of the createMediaStreamTrackSource() factory method. The MediaStreamTrackAudioSourceNode constructor may be used as an alternative.

It does only work with an AudioContext but not with an OfflineAudioContext.

createOscillator() / OscillatorNode

This is an implementation of the createOscillator() factory method. The OscillatorNode constructor may be used as an alternative.

createPanner() / PannerNode

This is an implementation of the createPanner() factory method. The PannerNode constructor may be used as an alternative.

createPeriodicWave() / PeriodicWave

This is an implementation of the createPeriodicWave() factory method. The PeriodicWave constructor may be used as an alternative.

createStereoPanner() / StereoPannerNode

This is an implementation of the createStereoPanner() factory method. The StereoPannerNode constructor may be used as an alternative.

The channelCountMode can only be 'explicit' unless Safari comes up with a native implementation.

createWaveShaper() / WaveShaperNode

This is an implementation of the createWaveShaper() factory method. The WaveShaperNode constructor may be used as an alternative.

decodeAudioData()

This is an implementation of the decodeAudioData() method. There is also a standalone method with a similar interface described below.

decodeAudioData()

This is a standalone wrapper which can be