The WaveShaperNode interface represents a non-linear distorter. It is an AudioNode that uses a curve to apply a wave shaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.

A WaveShaperNode always has exactly one input and one output.

Number of inputs 1
Number of outputs 1
Channel count mode "max"
Channel count 2 (not used in the default count mode)
Channel interpretation "speakers"


Creates a new instance of an WaveShaperNode object.


Inherits properties from its parent, AudioNode.

Is a Float32Array of numbers describing the distortion to apply.
Is an enumerated value indicating if oversampling must be used. Oversampling is a technique for creating more samples (up-sampling) before applying the distortion effect to the audio signal.


No specific method; inherits methods from its parent, AudioNode.


The following example shows basic usage of an AudioContext to create a wave shaper node. For applied examples/information, check out our Voice-change-O-matic demo (see app.js for relevant code).

Note: Sigmoid functions are commonly used for distortion curves because of their natural properties. Their S-shape, for instance, helps create a smoother sounding result. We found the below distortion curve code on Stack Overflow.

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var distortion = audioCtx.createWaveShaper();


function makeDistortionCurve(amount) {
  var k = typeof amount === 'number' ? amount : 50,
    n_samples = 44100,
    curve = new Float32Array(n_samples),
    deg = Math.PI / 180,
    i = 0,
  for ( ; i < n_samples; ++i ) {
    x = i * 2 / n_samples - 1;
    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
  return curve;


distortion.curve = makeDistortionCurve(400);
distortion.oversample = '4x';


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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support14 Yes25 No156
WaveShaperNode() constructor551 ?53 No42 ?
curve141225 No156
oversample141226 No156
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1414 Yes2615 ? Yes
WaveShaperNode() constructor551551 ?5342 ?6.0
curve Yes14 Yes2615 ? Yes
oversample Yes14 Yes2615 ? Yes

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

See also

Document Tags and Contributors

 Last updated by: fscholz,