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.
js
createWaveShaper()
None.
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.
js
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";
| Specification |
|---|
| Web Audio API # dom-baseaudiocontext-createwaveshaper |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
createWaveShaper |
15 | 12 | 25 | No | 15 | 6 | 4.4.3 | 18 | 25 | 14 | 6 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createWaveShaper