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

Altering the Curve of a WebAudio WaveShaper Node While Playing

本文关键字：节点 曲线 WaveShaper WebAudio 播放      更新时间：2023-09-26

我正在制作一个滚筒机/采样器，我希望用户能够使用滑块控制输出的失真量。我制作了一个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;
}

似乎发生的情况是，滑块的第一次更改会导致失真曲线发生变化，但在那之后，进一步的更改不会产生任何影响。有人能解释一下发生了什么吗？

我认为这就是问题所在：

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

滑块的值是一个字符串，而不是一个数字，这可以解释它第一次工作的原因（它的值为50）。所以如果你做

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

你应该准备好了！（或者，如果需要浮点，请使用parseFloat。）

相关文章：