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.

Race conditions between media teardown and setup steps? I've struggled with that problem. — O. Jones, Aug 03 '20 at 12:46
By teardown do you mean stopping the recording ie track.stop(). How did you solve your problem. I am collecting voice data so people have to speak small sentences and sometimes the recording is blank after multiple recordings. My initial thought was that it is something memory related. Like buffer overflowing or something. — Aman Krishna, Aug 04 '20 at 10:13

score 0 · Accepted Answer · answered Aug 09 '20 at 15:48

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.

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

1 Answers1