JSFiddle - React, Tailwind, and code Playground

HTML

<button id="p">Pause</button>
<audio controls src="https://dl.dropboxusercontent.com/s/v4laq04yl1gmcef/592d0d0d65fb320c776ac305.mp3?dl=0"></audio>

JavaScript

let aud = document.querySelector('audio');
let p = aud.play();
if (p && p.catch)
  p.catch(uglyFFworkaround);
else
  aud.onerror = uglyFFworkarounf;
// we've got a problem, probably FF
function uglyFFworkaround() {
  const frame = document.createElement('iframe'); // create an iframe

  frame.onload = e => {
    const doc = frame.contentDocument;
    // grab the mediaElement (usually an <video>)
    const inner_aud = doc.querySelectorAll('audio,video')[0];
    var new_aud = doc.createElement('audio'); // create an new audio from our frame's document
    new_aud.src = inner_aud.currentSrc; // set its src to the one of the default video
    inner_aud.pause(); // pause the video
    new_aud.controls = true;
    frame.replaceWith(new_aud); // replace the frame with the audio element
    aud = new_aud; // update our variable to point to this new audio
    aud.play(); // start playing
  };

  // in case our document is not on the same origin as the media
  fetch(aud.src) // fetch the resource
    .then(r => r.blob()) // as a blob
    .then(b => { // so that we can access the frame's document
      // ( if it were on the same origin, we could avoid this fetch altogether )
      frame.src = URL.createObjectURL(b);
      aud.replaceWith(frame);
    });
}

// and we can still access it programmatically
document.querySelector('button').onclick = e => aud.pause();