I wrote a recorder that records microphone from getUsermedia and audio which is from local using Howler JS. I created mediastream destination, and connected each sources (mic, audio) to the destination. audio seems fine, but microphone is delayed about 2seconds. I can't figure out the problem. could you help me guys?

var recorder;
const stop = document.getElementsByClassName("stop");
const record = document.getElementsByClassName("record");

let mediaDest = Howler.ctx.createMediaStreamDestination();
Howler.masterGain.connect(mediaDest);
function onRecordingReady(e) {
  // 'e' has 'blob event'
  //var audio = document.getElementById("audio");
  audioBlob = e.data; // e.data has blob.
  //audio.src = URL.createObjectURL(e.data);
}

let audioBlob;
let audioURL = "";

navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
  let userMic = Howler.ctx.createMediaStreamSource(stream);
  userMic.connect(mediaDest);
  Howler.masterGain.connect(mediaDest);
  recorder = new MediaRecorder(mediaDest.stream);
  recorder.addEventListener("dataavailable", onRecordingReady);
  recorder.addEventListener("stop", function () {
    W3Module.convertWebmToMP3(audioBlob).then((mp3blob) => {
      const downloadLink = document.createElement("a");
      downloadLink.href = URL.createObjectURL(mp3blob);
      downloadLink.setAttribute("download", "audio");
      //downloadLink.click();
      var audio = document.getElementById("audio");
      audio.src = URL.createObjectURL(mp3blob);
      console.log(mp3blob);
    });
  });
});

record[0].addEventListener("click", function () {
  recorder.start();
});

stop[0].addEventListener("click", function () {
  recorder.stop();
});