JSFiddle - React, Tailwind, and code Playground

HTML

<div id="audio_helper">
  <playpause class="audio_description" tabindex="1" title="Play spoken audio for the visually impaired">PLAY</playpause>
  <seek id="audio_desc_seek" class="seek_bar">
    <bar id="audio_desc_bar"></bar>
    <duration>00:00</duration>
  </seek>
</div>

<!-- Duplicate controls on another alternative location -->
<article>
  <playpause class="audio_description">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;
}

#audio_helper{
  display:block;
}

#audio_helper .seek_bar{
  display:none;
}

#audio_helper.displaySeek .seek_bar{
  display:inline-block;
}

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()
(function() {
  // use query selector all so your playpause bind must have class audio_description
  // this stops collision of another audio tag on the same page.
  var playBtns = document.querySelectorAll("playpause.audio_description");
  // this will hold the audio to prevent loading before it's required
  var audio = false;
  // are we playing
  var isPlaying = false;
  // get the process bar only for audio desciption
  var position = document.getElementById("audio_desc_seek");
  var progress = document.getElementById("audio_desc_bar");
  // setup an array to hold the audio sources.
  var audioSources = [];
  // add your sources here should be mp3 and ogg formats
  audioSources["audio/mpeg"] = "http://www.hochmuth.com/mp3/Bloch_Prayer.mp3";

  // function that sets everything up the first time the button is clicked on
  function handlePrePlayEvent(e){
      beginPlay();
      // prevent click firing on key down (return) if it beets it (older browser)
      e.preventDefault();
      e.stopPropagation();
      return false;
  }
  
  // these 2 functions are here because we can't use anon functions if we wish to unbind
  function prePlayClick(e){
  	return handlePrePlayEvent(e);
  }
  
  function prePlayReturn(e){
  	// does the browser support the new HTML5 standard way
    if(e.key !== undefined){
      // use the new browser method first
      if(e.key === "enter"){
        return handlePrePlayEvent(e);
      }
    }else{
       var key = (e.keyCode !== undefined)? e.keyCode:e.which;
       if(key == 13){
        return handlePrePlayEvent(e);
       }
    }
  }

  // setup the listener so first click prepairs everything
  for(var k in playBtns){
    var btn = playBtns[k];
    btn.addEventListener("click", prePlayClick);
    btn.addEventListener("keyup", prePlayReturn);
  }

  // handle prepairing everything for play of audio
  function beginPlay(){
		// check has this been fired before if not create the audio source
    if(audio...