Question

我正在制作鼓机/采样器，我希望用户能够使用滑块控制输出的失真量。我已经制作了一个WaveShaper节点，将其连接起来，使用本网站上的公式设置曲线，所有这些都可以。

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

这就是我所拥有的：

// 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节点的曲线

1 个答案: