JSFiddle - React, Tailwind, and code Playground

by MisterPudding

HTML

<div class="player">
    <audio id="HAE">
        <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b1/Haussperling2008.ogg/Haussperling2008.ogg.mp3" type="audio/mpeg">
    </audio>
    <div id="playpause">PLAY</div>
    <input id="progress" type="range" min="0" max="100" value="0" step="0.1">
    <div id="ct">00:00</div>
</div>
<p>
My solution to the question at <a href="https://stackoverflow.com/questions/49814828/javascript-html5-audio-custom-players-seekbar-and-current-time" target="_blank">https://stackoverflow.com/questions/49814828/javascript-html5-audio-custom-players-seekbar-and-current-time</a>
</p>
<p>
Original fiddle at <a href="https://jsfiddle.net/ebfr5ean/2/" target="_blank">https://jsfiddle.net/ebfr5ean/2/</a>
</p>

JavaScript

// VARIABLES

hae = document.getElementById('HAE');
pp = document.getElementById('playpause');
progress = document.getElementById('progress');
seeking = false;
ct = document.getElementById('ct');

// FUNCTIONS

function pad(str) {
	return (parseInt(str)<10 ? '0' : '') + str;
}

audioData = {};

Object.defineProperties(audioData, {
	seekto: {
	  get: function() {
		  return hae.duration * (progress.value / 100);
	  },
	  enumerable: true,
	  configurable: true
	},
	time: {
	  get: function() {
		  return hae.currentTime * (100 / hae.duration);
	  },
	  enumerable: true,
	  configurable: true
	},
	mins: {
	  get: function() {
		  return Math.floor(hae.currentTime / 60);
	  },
	  enumerable: true,
	  configurable: true
	},
	secs: {
	  get: function() {
		  return Math.floor(hae.currentTime % 60);
	  },
	  enumerable: true,
	  configurable: true
	},
});

// EVENTS

pp.addEventListener('click', togglePlay);
progress.addEventListener('mousedown', function(event) {seeking = true; seek(event);});
progress.addEventListener('mousemove', function(event) {seek(event);});
progress.addEventListener('mouseup', function() {seeking = false;});
hae.addEventListener('timeupdate', function(){ seekTimeUpdate(); });


// TOGGLE PLAY/PAUSE

function togglePlay() {
    if (hae.paused) {
        hae.play();
        pp.innerHTML = "PAUSE";
    }
    else {
        hae.pause();
        pp.innerHTML = "PLAY";
    }
}

// PROGRESS BAR

function seek(event){
    if(seeking){
        progress.value = event.clientX - progress.offsetLeft;
        hae.currentTime = audioData.seekto;
    }
}

// CURRENT TIME

function seekTimeUpdate(){
    progress.value = audioData.time;
    ct.innerHTML = pad(audioData.mins) + ":" + pad(audioData.secs);
}