⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Audio Player Skins and CSS Graphics Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲