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
WaveShaperNodeobject.
Properties
Inherits properties from its parent, AudioNode.
WaveShaperNode.curve- Is a
Float32Arrayof 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 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.
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 API The definition of 'WaveShaperNode' in that specification. |
Working Draft |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
WaveShaperNode | Chrome Full support 14 | Edge Full support ≤18 | 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
| Edge Full support ≤79 | Firefox Full support 53 | IE No support No | Opera Full support 42 | Safari ? | WebView Android
Full support
55
| Chrome Android
Full support
55
| Firefox Android Full support 53 | Opera Android Full support 42 | Safari iOS ? | Samsung Internet Android
Full support
6.0
|
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
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
