Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Audio Player Skins and CSS Graphics Tutorial

In this part of the Audio Workshop we are going to style our custom built audio player components into a custom skin. For those of you without graphics editing capabilities, we will also demonstrate CSS that resembles the skin image graphics. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ background:#666; } div#audio_player{ width:450px; height:60px; background: url(images/skin1.png) no-repeat; border-radius:4px;} div#audio_controls{ margin-left:66px; } div#audio_controls > button{ border:none; cursor:pointer; outline:none; display:block; float:left; margin:22px 10px 0px 0px; } div#audio_controls > input{ outline:none; display:block; float:left; margin:24px 10px 0px 0px; } 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{ margin: 23px 10px 0px 0px; float:left; width:80px; background:#000; border-bottom:#333 1px solid; 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> <div id="audio_player"> <div id="audio_controls"> <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"> </div> </div> </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