JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/umd.js"></script>
<button type="button" id="play-button">
Play
</button>
<div id="status">
Waiting
</div>

JavaScript

(async () => {
	const statusElement = document.getElementById("status");
  statusElement.textContent = "downloading mp3";
  
  const audioElement = new Audio();
  audioElement.onended = () => { statusElement.textContent = "ended"; };
  
  const playButton = document.getElementById("play-button");
  playButton.disabled = true;
  playButton.onclick = async () => {
  	await audioElement.play();
    statusElement.textContent = "playing";
  }

  const response = await fetch("https://s3.amazonaws.com/pfernandes.com/sample3.mp3");

  const audioBlob = await response.blob();
  console.log(audioBlob)

  const audioBlobUrl = URL.createObjectURL(audioBlob);
  console.log(audioBlobUrl)
  
  audioElement.src = audioBlobUrl;
  playButton.disabled = false;
  statusElement.textContent = "ready to play";
})();