播放时改变 WebAudio WaveShaper 节点的曲线

Question

我正在制作鼓 machine/sampler，我希望用户能够使用滑块控制输出的失真量。我制作了一个 WaveShaper 节点，将其正确连接起来，使用在该站点上找到的方程式设置曲线，一切正常。

然后我想要一个范围输入来调用更改事件上的函数来重置曲线，以根据输入的新值提供或多或少的失真。

这是我的：

// Distortion:
bussDistortion = audioContext.createWaveShaper();
bussDistortion.curve = makeDistortionCurve(0);
bussDistortion.connect(audioContext.destination);
// Slider:
distortionAmountSlider = document.querySelector('#distortion_amount');
// Event listener:
distortionAmountSlider.addEventListener('change', changeDistortionAmount, false);

// Update function:
function changeDistortionAmount() {
    bussDistortion.curve = makeDistortionCurve(distortionAmountSlider.value);
}

function makeDistortionCurve( amount ) {
    var k = typeof amount === 'number' ? amount : 50,
        n_samples = 44100,
        curve = new Float32Array(n_samples),
        i = 0,
        x;
    for ( ; i < n_samples; ++i ) {
        x = i * 2 / n_samples - 1;
        curve[i] = ( Math.PI + k ) * x * (1/6) / ( Math.PI + k * Math.abs(x) );
    }
    return curve;
}

似乎正在发生的事情是滑块的第一次变化导致失真曲线发生变化，但之后进一步的变化就没有效果了。任何人都可以解释发生了什么吗？

Answer 1

我认为这是错误的地方：

var k = typeof amount === 'number' ? amount : 50

滑块的值是一个字符串，而不是一个数字，这可以解释为什么它第一次起作用（它的计算结果为 50）。所以如果你这样做

makeDistortionCurve(parseInt(distortionAmountSlider.value, 10));

你应该可以开始了！（或者如果你需要一个浮点数，使用 parseFloat..）

播放时改变 WebAudio WaveShaper 节点的曲线

Altering the Curve of a WebAudio WaveShaper Node While Playing

javascript

web-audio-api