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" |
WaveShaperNode()
WaveShaperNode
object.Inherits properties from its parent, AudioNode
.
WaveShaperNode.curve
Float32Array
of numbers describing the distortion to apply.WaveShaperNode.oversample
No specific method; inherits methods from its parent, AudioNode
.
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';
Specification | Status | Comment |
---|---|---|
Web Audio API The definition of 'WaveShaperNode' in that specification. | Working Draft |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 14 | Yes | 25 | No | 15 | 6 |
WaveShaperNode() constructor |
55
|
? | 53 | No | 42 | ? |
curve |
14 | 12 | 25 | No | 15 | 6 |
oversample |
14 | 12 | 26 | No | 15 | 6 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | 18 | Yes | 26 | 15 | ? | Yes |
WaveShaperNode() constructor |
55
|
55
|
? | 53 | 42 | ? | 6.0 |
curve |
Yes | 18 | Yes | 26 | 15 | ? | Yes |
oversample |
Yes | 18 | Yes | 26 | 15 | ? | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WaveShaperNode