JSFiddle - React, Tailwind, and code Playground

HTML

<audio src="http://www.hochmuth.com/mp3/Bloch_Prayer.mp3" type="audio/mpeg" preload="none"></audio>
<play tabindex="1" title="Play spoken audio for the visually impaired">PLAY</play>
<pause tabindex="1" title="Pause audio, and press again to resume">PAUSE</pause>

<seek>
  <bar></bar>
  <duration>00:00</duration>
</seek>

<br><br><br>OLD VERSION - works perfectly BUT only 1 set of controls...

CSS

play,
pause {
  display: none;
  text-align: center;
  width: 30%;
  height: 70px;
  font-size: 4em;
  line-height: 1em;
  background: yellow;
  color: #BBB;
  cursor: pointer;
  float: left;
}

play:hover,
pause:hover {
  background: red;
  color: #FFF;
}

seek {
  display: inline-block;
  width: 70%;
  background: #CCC;
  cursor: pointer;
  height: 70px;
}

bar {
  height: 70px;
  background: red;
  width: 0%;
  border-right: 0px solid #FFF;
  display: block;
}

duration {
  float: right;
  margin: -1em 0 0 0;
  padding: 0 1em 0 0;
  height: inherit;
  line-height: 1em;
  font-size: 5em;
  color: red;
  font-weight: bold;
}

JavaScript

//window.onload = function()

  function displayControls() {
    play.style.display = "block";
  }

{
  var myAudio = document.getElementsByTagName('audio')[0];
  var play = document.getElementsByTagName('play')[0];
  var pause = document.getElementsByTagName('pause')[0];
  var position = document.getElementsByTagName('seek')[0];
  var progress = document.getElementsByTagName('bar')[0];


  // check that the media is ready before displaying the controls
  if (myAudio.paused) {
    displayControls();
  } else {
    // not ready yet - wait for canplay event
    myAudio.addEventListener('canplay', function() {
      displayControls();
    });
  }

  play.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      myAudio.play();
      play.style.display = "none";
      pause.style.display = "block";
      pause.focus(); // This is very important. Without it the UI breaks.
    }
  });

  pause.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      myAudio.pause();
      pause.style.display = "none";
      play.style.display = "block";
      play.focus(); // This is very important. Without it the UI breaks.
    }
  });

  play.addEventListener('click', function() {
    myAudio.play();
    play.style.display = "none";
    pause.style.display = "block";
  });

  pause.addEventListener('click', function() {
    myAudio.pause();
    pause.style.display = "none";
    play.style.display = "block";
  });


  // display progress
  myAudio.addEventListener('timeupdate', function() {
    //sets the percentage
    progress.style.width = parseInt(((myAudio.currentTime / myAudio.duration) * 99), 10) + 1 + "%";
    // added +1 sothat after hitting play immediately see visual jump from 0 to 1%
  });

  position.addEventListener('click', function(e) {
    // calculate the normalized position clicked
    var clickPosition = (e.pageX - this.offsetLeft) / this.offsetWidth;
    var clickTime = clickPosition * myAudio.duration;
    // move...