<html>
<head>


<script>
var audio, playbtn, mutebtn, seekslider, volumeslider, seeking=false, seekto;
function initAudioPlayer(){
	audio = new Audio();
	audio.src = "https://www.soundjay.com/free-music/midnight-ride-01a.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(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat";
	    } else {
		    audio.pause();
		    playbtn.style.background = "url(https://image.flaticon.com/icons/svg/148/148744.svg) no-repeat";
	    }
	}
	function mute(){
		if(audio.muted){
		    audio.muted = false;
		    mutebtn.style.background = "url(https://image.flaticon.com/icons/svg/204/204287.svg) no-repeat";
	    } else {
		    audio.muted = true;
		    mutebtn.style.background = "url(https://image.flaticon.com/icons/svg/148/148757.svg) 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>
  <h2 style="text-align: center">Press <br> play/pause || sound/mute</h2>
  <h2 style="text-align: center">Slide the bar for<br>audio seek && Volume</h3>
 
  
<button id="playpausebtn"></button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
  <br></br>
<button id="mutebtn"></button>
<input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
  
  <div style="text-align: center" id="footer">
    <h5><a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria</a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a></h5>
  </div> <!-- end footer -->
  
</body>
</html>

body{ 
   background-image: linear-gradient(to top, #c71d6f 0%, #d09693 100%);
  background-repeat: no-repeat;
  
  
   background-size: contain;
   background-attachment: fixed;
  
   color: #c71d6f;
}


button{ border:none; cursor:pointer; outline:none; }

button#playpausebtn{	background:url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat;
	width:10%;
	height:100px;
  
  display: block;
    margin: auto;
  
}

button#mutebtn{	background:url(https://image.flaticon.com/icons/svg/204/204287.svg) no-repeat;
	width:10%;
	height:100px;
  
  display: block;
    margin: auto;
}

/* Code for styling and all the browsers */

input#seekslider{
	width:100px;
  
  display: block;
    margin: auto;

}
input#volumeslider{
	width: 70px;
  
  display: block;
    margin: auto;
}
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;
}

/* Footer */

#footer {color: #000}
#footer a:link{ color: #000; }
#footer a:hover{ background: #fff; }
#footer a:visited{ color: #000; }
#footer a:active{ background: #EEFFA8; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.