JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ejb.github.io/progressor.js/progressor.js"></script>
<audio preload="auto" controls>
    <source src="http://ejb.github.io/progressor.js/demos/echoplex.ogg" type="audio/ogg">
    <source src="http://ejb.github.io/progressor.js/demos/echoplex.mp3" type="audio/mp3">
</audio>

<button onClick="document.getElementsByTagName('audio')[0].play();">play</button>
<button onClick="document.getElementsByTagName('audio')[0].pause();">pause</button>

<div id="progressbar1"></div>

<audio preload="auto" controls>
    <source src="http://ejb.github.io/progressor.js/demos/discipline.ogg" type="audio/ogg">
    <source src="http://ejb.github.io/progressor.js/demos/discipline.mp3" type="audio/mp3">
</audio>

<button onClick="document.getElementsByTagName('audio')[1].play();">play</button>
<button onClick="document.getElementsByTagName('audio')[1].pause();">pause</button>

<div id="progressbar2"></div>


<p>Songs taken from CC-licensed album <a href="http://dl.nin.com/theslip/signup">The Slip</a>. Current time of "Echoplex": <span id="timestamps"></span>.</p>

CSS

body {
    text-align: center;
}

.progressor {
  width: 300px;
  background: grey;
    text-align: center;
    font-family: Helvetica, Arial;
    font-size: 14px;
    padding: 4px 0;
    box-shadow: 0 0 6px black inset;
    color: white;
    margin: 50px auto;
    min-width: 3px;
}

.progressor-progress {
  background: darkred;
    box-shadow: 0 0 6px red;
}

audio {
    display: none;
}

JavaScript

var p = new Progressor({
    media : document.getElementsByTagName('audio')[0],
    bar : document.getElementById('progressbar1'),
    text : "Echoplex by Nine Inch Nails",    
    time : document.getElementById('timestamps')    
});

var q = new Progressor({
    media : document.getElementsByTagName('audio')[1],
    bar : document.getElementById('progressbar2'),
    text : "Discipline by Nine Inch Nails"
});