I am making an music app with js & jquery.

An user can add multiple audio files from local machine.

I want to apply an equalizer filter. So I have used AudioContext. Something like this:

    mediaElement = document.querySelector("#audioFiles_" + nameCounters);
    sourceNode = audioContext.createMediaElementSource(mediaElement);

    // Set filters
    [60, 170, 350, 1000, 3500, 10000].forEach(function (freq, i) {
        var eq = audioContext.createBiquadFilter();
        eq.frequency.value = freq;
        eq.type = "peaking";
        eq.gain.value = 0;
        filters.push(eq);
    });

    // Connect filters in serie
    sourceNode.connect(filters[0]);
    for (var i = 0; i < filters.length - 1; i++) {
        filters[i].connect(filters[i + 1]);
    }

    // Master volume is a gain node
    masterGain = audioContext.createGain();
    masterGain.value = 1;

    //connect the last filter to the speakers
    filters[filters.length - 1].connect(masterGain);


    // for stereo balancing, split the signal
    stereoPanner = audioContext.createStereoPanner();
    // connect master volume output to the panner
    masterGain.connect(stereoPanner);

    // Connect the stereo panner to analyser and analyser to destination
    stereoPanner.connect(audioContext.destination);

This code runs for each file that is added.

Everything works just fine if there is only ONE audio file.

If I add multiple audio files, the filter gets applied multiple times on each subsequent file. By the time the 10 file gets added, the audio is completely jarred.

link to demo: https://mellowmonks.in/demos/mixtape/10/

I have checked out many example codes on the internet, however, they all cover working with a single audio file.

This is the code i have used as reference: https://codepen.io/chi-hin-leung/pen/RwppEKG