Web/API/WaveShaperNode

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"`

Constructor

WaveShaperNode(): Creates a new instance of an WaveShaperNode object.

Properties

Inherits properties from its parent, AudioNode.

WaveShaperNode.curve: Is a Float32Array of numbers describing the distortion to apply.
WaveShaperNode.oversample: 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.

Methods

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

Example

The following example shows basic usage of an AudioContext to create a wave shaper node. For applied examples/information, check out our [[../../../../../../mdn.github.io/voice-change-o-matic/index|Voice-change-O-matic]] [[../../../../../../mdn.github.io/voice-change-o-matic/index|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,
    x;
  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';

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`WaveShaperNode`	Chrome Full support 14	Edge Full support 12	Firefox Full support 25	IE No support No	Opera Full support 15	Safari Full support 6	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support 26	Opera Android Full support 14	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0
`WaveShaperNode()` constructor	Chrome Full support 55 Notes' Full support 55 Notes' Notes' Before Chrome 59, the default values were not supported.	Edge Full support 79	Firefox Full support 53	IE No support No	Opera Full support 42	Safari No support No	WebView Android Full support 55 Notes' Full support 55 Notes' Notes' Before Chrome 59, the default values were not supported.	Chrome Android Full support 55 Notes' Full support 55 Notes' Notes' Before Chrome 59, the default values were not supported.	Firefox Android Full support 53	Opera Android Full support 42	Safari iOS No support No	Samsung Internet Android Full support 6.0 Notes' Full support 6.0 Notes' Notes' Before Samsung Internet 7.0, the default values were not supported.
`curve`	Chrome Full support 14	Edge Full support 12	Firefox Full support 25	IE No support No	Opera Full support 15	Safari Full support 6	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support 26	Opera Android Full support 14	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0
`oversample`	Chrome Full support 14	Edge Full support 12	Firefox Full support 26	IE No support No	Opera Full support 15	Safari Full support 6	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support 26	Opera Android Full support 14	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.