JSFiddle - React, Tailwind, and code Playground

by MAORBITON

HTML

!DOCTYPE html>
<html>
	<head>
		<title>HTML 5 Audio play with custom control</title>
	</head>
<body>
	<h2>HTML 5 Audio play with custom control</h2>
	<audio src="/DemoSupportingFiles/Multimedia/TechFundaAudio.mp3" id="audio1">
        Audio is not supported.
    </audio>
    <div>
        <input type="button" id="btnPlay" value="Play" onclick="PlayNow()" />
        <input type="button" id="btnPause" value="Pause" onclick="PauseNow()" />
        <input type="button" id="btnMute" value="Mute" onclick="MuteNow()" />
        <br />

        Volume :
        <input type="range" min="0" max="1" step="0.1" id="volume"
            onchange="ChangeVolume()">
        <br />

        Time lapsed:
        <input type="range" step="any" id="seekbar"
            onchange="ChangeTheTime()">
        <label id="lblTime">-:--:--</label>
    </div>

JavaScript

// get the audio, volume and seekbar elements
        var audio = document.getElementById("audio1");
        var volumeRange = document.getElementById('volume');
        var seekbar = document.getElementById('seekbar');
        
        window.onload = function () {
            audio.addEventListener('timeupdate', UpdateTheTime, false);
            audio.addEventListener('durationchange', SetSeekBar, false);
            volumeRange.value = audio.volume;
        }

        // fires when volume element is changed
        function ChangeVolume() {
            var myVol = volumeRange.value;
            audio.volume = myVol;
            if (myVol == 0) {
                audio.muted = true;
            } else {
                audio.muted = false;
            }
        }

        // fires when page loads, it sets the min and max range of the video
        function SetSeekBar() {
            seekbar.min = 0;
            seekbar.max = audio.duration;
        }

        // fires when seekbar is changed
        function ChangeTheTime() {
            audio.currentTime = seekbar.value;
        }

        function UpdateTheTime() {
            var sec = audio.currentTime;
            var h = Math.floor(sec / 3600);
            sec = sec % 3600;
            var min = Math.floor(sec / 60);
            sec = Math.floor(sec % 60);
            if (sec.toString().length < 2) sec = "0" + sec;
            if (min.toString().length < 2) min = "0" + min;
            document.getElementById('lblTime').innerHTML = h + ":" + min + ":" + sec;
            seekbar.min = audio.startTime;
            seekbar.max = audio.duration;
            seekbar.value = audio.currentTime;
        }

        // fires when Play button is clicked
        function PlayNow() {
            if (audio.paused) {
                audio.play();
            } else if (audio.ended) {
                audio.currentTime = 0;
                audio.play();
            }
        }
        // fires when Pause button is...