W3cubDocs

/Web APIs

BaseAudioContext: createWaveShaper() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2021⁩.

The createWaveShaper() method of the BaseAudioContext interface creates a WaveShaperNode, which represents a non-linear distortion. It is used to apply distortion effects to your audio.

Note: The WaveShaperNode() constructor is the recommended way to create a WaveShaperNode; see Creating an AudioNode.

Syntax

createWaveShaper()

Parameters

None.

Return value

A WaveShaperNode.

Examples

The following example shows basic usage of an AudioContext to create a wave shaper node. For more complete 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.

const audioCtx = new AudioContext();
const distortion = audioCtx.createWaveShaper();

// …

function makeDistortionCurve(amount) {
  const k = typeof amount === "number" ? amount : 50;
  const n_samples = 44100;
  const curve = new Float32Array(n_samples);
  const deg = Math.PI / 180;

  for (let i = 0; i < n_samples; i++) {
    const 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
Web Audio API> # dom-baseaudiocontext-createwaveshaper>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`createWaveShaper`	15	12	25	15	6	18	25	14	6	1.0	4.4.3	6