Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Audio Seek and Volume Range Slider Tutorial

Published :
Author :
Adam Khoury
In this part of the Audio Workshop we demonstrate how the range slider input can be used as a seek slider and a volume slider. We will also demonstrate how you can try to achieve a consistent range slider input appearance across different browsers. <!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; } 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; 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"); // 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); // 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; } } window.addEventListener("load", initAudioPlayer); </script> </head> <body> <button id="playpausebtn"></button> <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> <button id="mutebtn"></button> <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> </body> </html>