JSFiddle - React, Tailwind, and code Playground

HTML

<audio><source src="http://www.hochmuth.com/mp3/Bloch_Prayer.mp3" type="audio/mpeg"></audio>
<playpause tabindex="1" title="Play spoken audio for the visually impaired">PLAY</playpause>
<seek>
  <bar></bar>
  <duration>00:00</duration>
</seek>
<br><br>

<!-- Duplicate controls on another alternative location -->
<article>
  <playpause>PLAY</playpause>
</article>

<br><br><br>NEW - duplicated set of controls for easier navigation BUT time duration is broken.

CSS

playpause {
  text-align: center;
  width: 30%;
  height: 70px;
  font-size: 4em;
  line-height: 1em;
  background: blue;
  color: #BBB;
  cursor: pointer;
  float: left;
}

playpause:hover {
  background: red;
  color: #FFF;
}

article playpause {
  float: none;
  background: white;
  color: black;
  outline: 1px solid #000;
}

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];
// Must register an event listener for every play and pause button
document.getElementsByTagName("playpause")[0].addEventListener("click", playpause);
document.getElementsByTagName("playpause")[1].addEventListener("click", playpause);
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();
    state = "&#10074;&#10074;";
    //pause.focus(); // This is very important. Without it the UI breaks.
  }
});

pause.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    myAudio.pause();
    state = "&#10074;&#10074;";
    //play.focus(); // This is very important. Without it the UI breaks.
  }
});


function playpause() {
  var state;
  if (myAudio.paused) {
    myAudio.play();
    state = "PAUSE";
  } else {
    myAudio.pause();
    state = "RESUME";
  }
  for (var i = 0; i < document.getElementsByTagName("playpause").length; i++) {
    document.getElementsByTagName("playpause")[i].innerHTML = state;
  }


  // 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 immediate progress bar feedbacks to 1%
  });

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