Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Audio Seek and Volume Range Slider Tutorial

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