How can I remove that ‘thump’ when I change tracks in an audio tag?

I’m recording and sending audio to my server every 5 seconds to hear it in an audio tag on the other side, but when the track changes I hear that “thump” which gets to the point where it’s annoying.

Is it possible to remove it or decrease that noise?

  • Code:
let audio = document.querySelector(".audio");
let record = document.querySelector(".record");
let chunks = [];
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
  const mediaRecorder = new MediaRecorder(stream);

  record.onclick = () => {
    mediaRecorder.start();
    setTimeout( () => {
      mediaRecorder.stop();
    }, 5000);
  };

  mediaRecorder.onstop = (event) => {
    // here I send the audio to the other side and record again making a loop
    record.click();

    audio.controls = true;
    const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
    chunks = [];
    const audioURL = URL.createObjectURL(blob);
    audio.src = audioURL;
  };

  mediaRecorder.ondataavailable = (event) => {
    chunks.push(event.data);
  };
});
<audio class="audio" controls autoplay></audio>
<br>
<br>
<button class="record">Recording</button>