I get mediaDevices file like below code.

  AudioBtn.innerText = "Stop Audio Recording";
  AudioBtn.removeEventListener("click", handleAudioStart);
  AudioBtn.addEventListener("click", handleAudioStop);
  stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: false,
  });
  recordAudio.srcObject = stream;
  recordAudio.play();
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = (event) => {
    videoFile = URL.createObjectURL(event.data);
    recordAudio.srcObject = null;
    recordAudio.src = videoFile;
    recordAudio.play();
  };

And I make my homepage to autoplay this URL. Immediately after I record video, it works.

But when I re-visit the homepage, this link is not accessible.

this link that I get from it is this: -> blob:http://localhost:4000/fc7229a2-a739-4ee6-b04a-c4d41afa9e7e.

When I click this link, it says it's blocked.

Why it happens? and how can I make it persisted for long?