HTML5 HTML 5 Audio play with custom control example

Write code here

J | B | A

<!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>

// 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 clicked
        function PauseNow() {
            if (audio.play) {
                audio.pause();
            }
        }
        // fires when Mute button is clicked
        function MuteNow() {
            if (audio.muted) {
                audio.muted = false;
                volumeRange.value = audio.volume;
            }
            else {
                audio.muted = true;
                volumeRange.value = 0;
            }
        }
    </script>
</body>
</html>

Note: We DO NOT save your trial code in our database.

HTML5 > HTML 5 Audio Play With Custom Control

Write code here

Output