Getting audio from GridFS and playing it in Next.JS

Question

I have an audio file stored with GridFS in a database on MongoDB Atlas.

In my Next.JS app, I want to provide the user with a button to play this audio file. Of course I can connect to the database to have access to the file.

What is the best and simplest way to accomplish what I want ?

Here is the code I started to write, it is obviously incomplete and most probably incorrect:

const playVoiceChunk = async () => {
  console.log('playVoiceChunk--CALLED!!')
  if ("MediaRecorder" in window) {
    try {
      const streamData = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: false,
      });
      /*setPermission(true);
      setStream(streamData);*/

      // We must play the record at Voice/channelID/voiceRecordID
      const theRecord = await theModel
      .find({channelID:channel,voiceRecordID:recordID})
      mediaPlay(theRecord)
    } catch (err) {
      alert("err.message");
    }
  } else {
    alert("The MediaRecorder API is not supported in your browser.");
  }
}; /* End of playVoiceChunk */


return <>
<section className={displMod}>
  <div className='eng'>Play Audio with the button below</div>
  <button onClick={playVoiceChunk} type="button"
          className="rcdBtn micBtn">
    <HiSpeakerWave color='#554433' size={37} />
  </button>
</section>
</>;