Preventing javascript mediarecorder from fluctuating volume during simultaneous buffer playback

Question

I've missed singing in choirs during the pandemic, so I'm working on a multitrack voice recorder where you can listen to other tracks while recording. Recording and playback one at a time work just fine. However, when I try to do both simultaneously, the resulting recording cuts in and out between normal and very quiet.

Could this be due to running them simultaneously in Javascript? Or is it more likely to be an issue with my own computer's audio setup? I'm using an aging XPS 13 with Windows 10, using cheap earbuds and the laptop's mic. I don't know much about what this does, but I tried in Windows settings changing the mic sample rate from 16 bit, 48000Hz to 24 bit, 48000Hz . Nothing seemed to change, though. While I could find links about people with completely non-functional mics, an hour's search didn't get me closer to any answers about this.

Currently it's setup so that if I press record, the following are run:

play(mergedTrackBuffer)
setTimeout(function(){mediaRecorder.start();}, 100);

Where mergedTrackBuffer is a single audio buffer and mediaRecorder is taking audio from the microphone. If mergedTrackBuffer is empty, the new recording sounds just fine.

Answer 1

I think in your setting it would be beneficial to disable all pre-processing of the microphone signal. That can be done by specifying some constraints when calling getUserMedia().

navigator.mediaDevices.getUserMedia({
    audio: {
        autoGainControl: false,
        echoCancellation: false,
        noiseSuppression: false
    }
});

However some devices (I only saw this on phones so far) do apply some pre-processing on the hardware which can't be disabled from within the browser. If the above doesn't work it might be worth checking the code on a different device.