Audio Time Update Position Tutorial
In this part we are going to establish a timeupdate event handler for our Audio object, which will serve 2 purposes in the particular application we have built so far. This event will allow us to show current play time against the full duration, it will also allow us to update the position of our seek slider knob so as the audio plays, the seek knob moves along with it by itself.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{ background:#666; }
button{ border:none; cursor:pointer; outline:none; }
input{ outline:none; }
button#playpausebtn{
background:url(images/pause.png) no-repeat;
width:12px;
height:14px;
}
button#mutebtn{
background:url(images/speaker.png) no-repeat;
width:5px;
height:14px;
}
input#seekslider{
width:100px;
}
input#volumeslider{
width: 70px;
}
div#timebox{
display:inline-block;
width:80px;
background:#000;
text-align:center;
color: #09F;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
}
input[type='range'] {
-webkit-appearance: none !important;
margin:0px;
padding:0px;
background: #000;
height:13px;
border-bottom:#333 1px solid;
}
input[type='range']::-ms-fill-lower {
background:#000;
}
input[type='range']::-ms-fill-upper {
background:#000;
}
input[type='range']::-moz-range-track {
border:none;
background: #000;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: radial-gradient(#FFF, #333);
height:11px;
width:11px;
border-radius:100%;
cursor:pointer;
}
input[type='range']::-moz-range-thumb {
background: radial-gradient(#FFF, #333);
height:11px;
width:11px;
border-radius:100%;
cursor:pointer;
}
input[type='range']::-ms-thumb {
-webkit-appearance: none !important;
background: radial-gradient(#FFF, #333);
height:11px;
width:11px;
border-radius:100%;
cursor:pointer;
}
</style>
<script>
var audio, playbtn, mutebtn, seekslider, volumeslider, seeking=false, seekto, curtimetext, durtimetext;
function initAudioPlayer(){
audio = new Audio();
audio.src = "audio/Stoker.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
mutebtn = document.getElementById("mutebtn");
seekslider = document.getElementById("seekslider");
volumeslider = document.getElementById("volumeslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
// Add Event Handling
playbtn.addEventListener("click",playPause);
mutebtn.addEventListener("click", mute);
seekslider.addEventListener("mousedown", function(event){ seeking=true; seek(event); });
seekslider.addEventListener("mousemove", function(event){ seek(event); });
seekslider.addEventListener("mouseup",function(){ seeking=false; });
volumeslider.addEventListener("mousemove", setvolume);
audio.addEventListener("timeupdate", function(){ seektimeupdate(); });
// Functions
function playPause(){
if(audio.paused){
audio.play();
playbtn.style.background = "url(images/pause.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(images/play.png) no-repeat";
}
}
function mute(){
if(audio.muted){
audio.muted = false;
mutebtn.style.background = "url(images/speaker.png) no-repeat";
} else {
audio.muted = true;
mutebtn.style.background = "url(images/speaker_muted.png) no-repeat";
}
}
function seek(event){
if(seeking){
seekslider.value = event.clientX - seekslider.offsetLeft;
seekto = audio.duration * (seekslider.value / 100);
audio.currentTime = seekto;
}
}
function setvolume(){
audio.volume = volumeslider.value / 100;
}
function seektimeupdate(){
var nt = audio.currentTime * (100 / audio.duration);
seekslider.value = nt;
var curmins = Math.floor(audio.currentTime / 60);
var cursecs = Math.floor(audio.currentTime - curmins * 60);
var durmins = Math.floor(audio.duration / 60);
var dursecs = Math.floor(audio.duration - durmins * 60);
if(cursecs < 10){ cursecs = "0"+cursecs; }
if(dursecs < 10){ dursecs = "0"+dursecs; }
if(curmins < 10){ curmins = "0"+curmins; }
if(durmins < 10){ durmins = "0"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
}
window.addEventListener("load", initAudioPlayer);
</script>
</head>
<body>
<button id="playpausebtn"></button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<div id="timebox">
<span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span>
</div>
<button id="mutebtn"></button>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
</body>
</html>