Audio signal drops in audio recording using webaudioapi and recorder.js

Question

I am recording audio using web audio API and recorder.js but when I download the audio and checked this audio spectogram. I have found signals dropped for some milliseconds. Not getting any solution. Can sombody tell me what changes I should make in the code. Any help will be appreciated.

    let gumStream = null;
    let recorder = null;
    let audioContext = null;

  let recordButton = document.getElementById("recordButton");
  let stopButton = document.getElementById("stopButton");
  let pauseButton = document.getElementById("pauseButton");

    const startRecording = () => {
      let constraints = {
        audio: true,
        video: false,
      };
      timer.style.color = "#78CF4D"
      recordButton.disabled = true;
      stopButton.disabled = false;
      pauseButton.disabled = false;
  
      audioContext = new window.AudioContext({
        sampleRate: 16000,
        //bufferLen: 4096
      });
      console.log("sample rate: " + audioContext.sampleRate);
  
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function (stream) {
          console.log("initializing Recorder.js ...");
  
          gumStream = stream;
  
          let input = audioContext.createMediaStreamSource(stream);
  
          recorder = new window.Recorder(input, {
            numChannels: 1,
            sampleBits: 16, // 8 or 16
            //bufferLen: 4096,
            mimeType: "audio/wav",
          });
  
          recorder.record();
         
          if (stoptime == true) {
            stoptime = false;
            timerCycle();
          }
        })
        .catch(function (err) {
          //enable the record button if getUserMedia() fails
          timer.style.color = "#7C7F85"
          recordButton.disabled = false;
          stopButton.disabled = true;
          pauseButton.disabled = true;
        });
   
  };

Answer 1

I assume you've tested this in Chrome (or Edge or Opera). There is a long standing bug in Chrome. It sometimes inserts silence when you use an AudioContext to only record something without playing anything.

https://bugs.chromium.org/p/chromium/issues/detail?id=1016104

Unfortunately this is exactly what Recorder.js does.

I'm maintaining a similar library and ran into the same problem a while ago. Luckily there is a workaround. Chrome's MediaRecorder doesn't have the same bug. It will record without any outages. And it allows to record PCM audio wrapped in a webm container. My library uses that to record uncompressed audio.

In short I would expect the silence to go away if you use extendable-media-recorder instead.