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
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 lines 108–193 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
BCD tables only load in the browser