Fetching full audio file from server

I have a client and server set up. I'm currently fetching the file from my server and then streaming it to the client. I've tried to set it up so the audio doesn't start playing until it's fully loaded but I still get back partial audio. If I download the file on the browser, however, all of the audio is there. I'm implementing a TTS app so I can't preload the audio directly. How can I force the browser to not play until the full audio is able to be played through? Here's what I have so far.

const handleAudioLoaded = () => {
  console.log("Got here for the x'th time");
  const audioElement = document.getElementById(
    "audioplayer"
  ) as HTMLAudioElement;
  if (audioElement) audioElement.play();

{!loading && audio && (
            <ReactAudioPlayer
              id="audioplayer"
              src={`http://localhost:8000/audio/${audio}`}
              onCanPlayThrough={handleAudioLoaded}
              // onLoadedMetadata={handleAudioLoaded}
              preload="auto"
              controls
            />
          )}

In your case, you can download the audio using fetch then create an object url and assign to the audio player.

fetch(`https://your-audio-location)
  .then(res => res.blob())
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    const newAudioURL = objectURL;
  });