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.mp3" type="audio/mp3">
<source src="http://ejb.github.io/progressor.js/demos/echoplex.ogg" type="audio/ogg">
</audio>
<div id="progressbar"></div>
<p id="time"></p>
<audio preload="auto" controls>
<source src="http://ejb.github.io/progressor.js/demos/discipline.mp3" type="audio/mp3">
<source src="http://ejb.github.io/progressor.js/demos/discipline.ogg" type="audio/ogg">
</audio>
<div id="progressbar2"></div>
<p id="time2"></p>
<p>Songs taken from CC-licensed album <a href="http://dl.nin.com/theslip/signup">The Slip</a>.
CSS
.progressor {
width: 300px;
height: 20px;
background: lightgrey;
}
.progressor-progress {
background: grey;
}
JavaScript
var p = new Progressor({
media : document.getElementsByTagName('audio')[0],
bar : document.getElementById('progressbar'),
text : "Echoplex by Nine Inch Nails",
time : document.getElementById('time')
});
var pr = new Progressor({
media : document.getElementsByTagName('audio')[1],
bar : document.getElementById('progressbar2'),
text : "Discipline by Nine Inch Nails",
time : document.getElementById('time2')
});