Why does recording multiple audio using Recorder.js and MediaDevices result in an empty recording later on?

Question

I am using Recorder.js and MediaDevices to record audio. First few recordings are good but after some recordings (random as far as I can tell) the recorded audio is empty.

I can create the same issue if I Press Record and Stop in quick succession for some time.

Here is my code:

recordFunction=()=>{
    // setup the recorder
    var input;
    var volume;
    var AudioContext = window.AudioContext || window.webkitAudioContext;
    this.audioContext = new AudioContext;

    if(!this.state.isRecording){
        this.setState({
            isRecording:true
        });
        var constraints = {
            audio: {
                mandatory: {
                    googAutoGainControl: true,
                    googNoiseSuppression: false,
                    googHighpassFilter: false
                }
            },
            video: false
        }

        // providing support for older Browsers
        if(navigator.mediaDevices===null){
            navigator.mediaDevices = {};
        }
        
        if(navigator.mediaDevices.getUserMedia===null){
            navigator.mediaDevices.getUserMedia = (
                navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia
            )
        }
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream)=> {
            this.gumStream = stream;
            input = this.audioContext.createMediaStreamSource(stream);
            this.rec = new Recorder(input, {
                numChannels: 1
            }) 
            this.rec.record();
        }).catch((err) =>{
            console.log("Error in recording: ",err);
        });
    }
    else{
        this.rec.stop();
        this.gumStream.getAudioTracks()
        .forEach( (track) => {
            track.stop()
        } );
        this.gumStream.getVideoTracks().forEach((track)=> {
            track.stop();
        });
        this.gumStream=null;
        //create the wav blob and pass it on to createDownloadLink 
        this.rec.exportWAV(this.createDownloadLink);
    }
}

recordFunction is called every time I press Record and Stop. Is my implementation incorrect?

If I wait for sometime (after an empty recording), say 5 sec the recorder starts working fine as before. I can't get my head around what I should try. I am fairly new to web development and sound recording.

Any suggestions would be appreciated.

Answer 1

In case someone has the same issue in the future.

The Problem was: I was creating a new AudioContext at each button Click. I tried running the App on a Phone where after pressing Record 6 times I got an error:

The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6)

I shifted these lines:

var AudioContext = window.AudioContext || window.
this.audioContext = new AudioContext;

Into Another file as:

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
export default audioContext;

This Solved the Issue.