WaveShaperNode

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()
Creates a new instance of an WaveShaperNode 对象。

特性

Inherits properties from its parent, AudioNode .

WaveShaperNode.curve
Float32Array of 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.

方法

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

注意 : 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';
					

规范

规范 状态 Comment
Web 音频 API
The definition of 'WaveShaperNode' in that specification.
工作草案

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
WaveShaperNode Chrome 14 Edge ≤18 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS Yes Samsung Internet Android 1.0
WaveShaperNode() 构造函数 Chrome 55
注意事项
55
注意事项
Before Chrome 59, the default values were not supported.
Edge ≤79 Firefox 53 IE 不支持 No Opera 42 Safari ? WebView Android 55
注意事项
55
注意事项
Before Chrome 59, the default values were not supported.
Chrome Android 55
注意事项
55
注意事项
Before Chrome 59, the default values were not supported.
Firefox Android 53 Opera Android 42 Safari iOS ? Samsung Internet Android 6.0
注意事项
6.0
注意事项
Before Samsung Internet 7.0, the default values were not supported.
curve Chrome 14 Edge 12 Firefox 25 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS Yes Samsung Internet Android 1.0
oversample Chrome 14 Edge 12 Firefox 26 IE 不支持 No Opera 15 Safari 6 WebView Android Yes Chrome Android 18 Firefox Android 26 Opera Android 14 Safari iOS Yes Samsung Internet Android 1.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
见实现注意事项。

另请参阅