WEB Audio API Filter - change cutoff frequency with slider position-CodePudding

While making a draft for WEB Audio API synth, I've encountered a problem. The signal chain is oscillator -> gain -> filter -> output. The filter cutoff frequency can be adjusted with a range slider. And it works - when you move the slider, the cutoff frequency changes. But! only once. After doing it one time, shifting the slider makes no difference to the sound.

Here is the HTML code for the slider:

    <input type="range" id="filterFreq" name="filterFreq" min="0" value="1000" max="20000" step="1">
    <label for="filterFreq" id="filterFreqLabel">frequency</label>

Here is the JS code that connects it with the cutoff frequency of the filter:

    // When fader moves, we change filter frequency value
    $('#filterFreq').on('change', function () {
        filter.frequency.value = this.value;
        $('#filterFreqLabel')[0].innerText = this.value;
    });

The codepen for this one button synth: https://codepen.io/kkrzaevich/pen/MWXGyRW

As I've mentioned, the slider works, but only once. Would appreciate suggestions to make it work, well, as many times as needed. Thanks!

CodePudding user response：

I don't have a good explanation for this but it all works as expected if you also call disconnect() on the oscillator once you don't need it any longer.

document
    .getElementById('button')
    .addEventListener(
        'mouseup',
        function (event) {
            oscillator.stop();
            oscillator.disconnect();

            delete oscillator;
        }
    );

Interestingly this only seems to be a problem in Chrome. Firefox and Safari behave correctly.