JSFiddle - React, Tailwind, and code Playground

HTML

<audio><source src="http://www.hochmuth.com/mp3/Bloch_Prayer.mp3" type="audio/mpeg" preload="none"></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;
  transition: width 1s;
}

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()
var playBtns = document.getElementsByTagName("playpause");

function displayControls() {
  for(var key in playBtns){
    var play = playBtns.item(key);
    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();
  });
}

for(var key in playBtns){
    var play = playBtns.item(key);
    play.addEventListener("keyup", function(event) {
      playpause();
    });

    play.addEventListener("keyup", function(event) {
      playpause();
    });
}

// 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%
});

// show duration in min : sec
myAudio.addEventListener("loadedmetadata", function(e) {
  console.log(myAudio, e);
  var minutes = parseInt(myAudio.duration / 60, 10);
  var seconds = parseInt(myAudio.duration % 60);
  document.getElementsByTagName("duration")[0].innerHTML = (minutes + " min " + seconds + " sec");
});

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 =...