Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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

JavaScript Videos

Audio Programming

Button Sound Effects Tutorial Audible Menu SystemsAudio Play Pause Mute Buttons TutorialAudio Seek and Volume Range Slider TutorialAudio Time Update Position TutorialAudio Player Skins and CSS Graphics TutorialAudio OGG Files CheckAudio Play Speed Setting playbackRate TutorialAudio Playlist Play Buttons JavaScript Programming TutorialAudio Playlist Array TutorialAudio Song Select Track Playlist TutorialAnalyser Bars Animation HTML Audio API TutorialPlay Uninterrupted Background Music On Your WebsiteHow to Create Custom Sound Effects with FruityLoops