JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">
start
</button>

JavaScript

function markContextAsAllowed(context) {
  const gain = context.createGain();
  gain.gain.value = 0;
  const osc = context.createOscillator();
  osc.onended = e => gain.disconnect();
  osc.connect(gain);
  gain.connect(context.destination);
  osc.start(0);
  osc.stop(0.01);
}

btn.onclick = e => {
  const url = "https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3?dl=0";
  const context = new(window.AudioContext || window.webkitAudioContext)();
  const source = context.createBufferSource();
  // allow context synchronously
  markContextAsAllowed(context);
  fetch(url).then(r => r.blob())
    .then(x => {
      const fileReader = new FileReader();

      fileReader.onloadend = () => {
        context.decodeAudioData(fileReader.result, buffer => {
          source.buffer = buffer;
          source.connect(context.destination);
          source.start(0);
        }, y => {
          console.info("Error: " + y);
        });
      };

      fileReader.readAsArrayBuffer(x);
    });
}