The PeriodicWave interface defines a periodic waveform that can be used to shape the output of an OscillatorNode.

PeriodicWave has no inputs or outputs; it is used to define custom oscillators when calling OscillatorNode.setPeriodicWave(). The PeriodicWave itself is created/returned by AudioContext.createPeriodicWave().


Creates a new PeriodicWave object instance using the default values for all properties. If you wish to establish custom property values at the outset, use the AudioContext.createPeriodicWave() factory method instead.


None; also, PeriodicWave doesn't inherit any properties.


None; also, PeriodicWave doesn't inherit any properties.


The following example illustrates simple usage of createPeriodicWave(), to create a PeriodicWave object containing a simple sine wave.

var real = new Float32Array(2);
var imag = new Float32Array(2);
var ac = new AudioContext();
var osc = ac.createOscillator();

real[0] = 0;
imag[0] = 0;
real[1] = 1;
imag[1] = 0;

var wave = ac.createPeriodicWave(real, imag, {disableNormalization: true});




This works because a sound that contains only a fundamental tone is by definition a sine wave

Here, we create a PeriodicWave with two values. The first value is the DC offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range.

The second and subsequent values are sine and cosine components. You can think of it as the result of a Fourier transform, where you get frequency domain values from time domain value. Here, with createPeriodicWave(), you specify the frequencies, and the browser performs an inverse Fourier transform to get a time domain buffer for the frequency of the oscillator. Here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave.

The coefficients of the Fourier transform should be given in ascending order (i.e. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}   etc.) and can be positive or negative.  A simple way of manually obtaining such coefficients (though not the best) is to use a graphing calculator.


Specification Status Comment
Web Audio API
The definition of 'PeriodicWave' in that specification.
Working Draft  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support14 Yes25 No156
PeriodicWave() constructor551 ?53 No42 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1414 Yes2615 ? Yes
PeriodicWave() constructor551551 ?5342 ?6.0

1. Before Chrome 59, the default values were not supported.

See also

Document Tags and Contributors

Contributors to this page: fscholz, chrisdavidmills, Sheppy, abbycar, teoli
Last updated by: fscholz,