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⁩.

ThecreateWaveShaper() method of theBaseAudioContextinterface creates aWaveShaperNode, which represents a non-lineardistortion. It is used to apply distortion effects to your audio.

Note:TheWaveShaperNode()constructor is the recommended way to create aWaveShaperNode; seeCreating an AudioNode.

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

Note:Sigmoid functions are commonly used for distortion curvesbecause of their natural properties. Their S-shape, for instance, helps create asmoother sounding result. We found the below distortion curve code onStack Overflow.

const audioCtx = new AudioContext();const distortion = audioCtx.createWaveShaper();// …function makeDistortionCurve(amount) {  const k = typeof amount === "number" ? amount : 50;  const numSamples = 44100;  const curve = new Float32Array(numSamples);  const deg = Math.PI / 180;  for (let i = 0; i < numSamples; i++) {    const x = (i * 2) / numSamples - 1;    curve[i] = ((3 + k) * x * 20 * deg) / (Math.PI + k * Math.abs(x));  }  return curve;}// …distortion.curve = makeDistortionCurve(400);distortion.oversample = "4x";