Menu
I have a javascript audio player that is able to track the timing or stay in sync while the song is playing and when the user clicks on the progress bar, the slider handle will set the value of the “audio.currentTime”.
Here is the actual audio player that I’m currently testing. Please take a quick look:
But what I’m trying to do is create either a background color or background image that will also move along the progress bar to sync up with the currentTime as well.
Here is what I have so far:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
<title>Document</title>
<style>
#audio-container{
position:relative;
margin:auto;
width:320px;
height:90px;
background:orange;
border:2px solid black;
margin-top:25px;
}
#play{
background:url(images/play-sprite.png);
background-position:0px 0px;
width:60px;
height:60px;
float:left;
cursor:pointer;
margin-left:5px;
}
#play:hover{
background-position:120px 0px;
}
#play:active{
background-position:60px 0px;
}
#pause{
background:url(images/pause-sprite.png);
background-position:0px 0px;
width:60px;
height:60px;
float:left;
cursor:pointer;
}
#pause:hover{
background-position:120px 0px;
}
#pause:active{
background-position:60px 0px;
}
#audio-slider{
position:relative;
-webkit-appearance:none;
appearance:none;
width:98%;
background:darkorange;
border:1px solid brown;
height:10px;
border-radius:10px;
outline:none;
cursor:pointer;
margin-left:2px;
margin-top:5px;
}
#audio-slider::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:10px;
height:20px;
border:1px solid black;
background:brown;
}
#fill-bar{
position:absolute;
height:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
margin-left:2px;
margin-top:5px;
width:0px;
background:red;
bottom:14px;
left:1px;
}
</style>
</head>
<body>
<div id=”audio-container”>
<div id=”play” onclick=”play()”></div>
<div id=”pause” onclick=”pause()”></div>
<input type=”range” id=”audio-slider” min=”0″ value=”0″ step=”1″ onchange=”seek()”>
<div id=”fill-bar”></div>
</div>
</body>
<script type=”text/javascript”>
var audio = new Audio();
var audioSlider = document.getElementById(“audio-slider”);
var fillbar = document.getElementById(“fill-bar”);
audio.src = “music/Song2.mp3”;
function play(){
audio.play();
}
function pause(){
audio.pause();
}
//sync the slider handle with the currentTime
setInterval(updateSongSlider, 1000);
function updateSongSlider(){
var c = Math.round(audio.currentTime);
audioSlider.value = c;
fillbar.style.width = c + “px”;
var d = audio.duration
audioSlider.setAttribute(“max”, d);
}
//set the currentTime to match users click on the progress bar
function seek(){
audio.currentTime = audioSlider.value;
play();
}
</script>
</html>
How would I create the background color or image to sync up with the currentTime? The problem is that the #fill-bar div is covering up the input slider and doesn’t allow for me to click and set the currentTime properly on the progress bar.
What would be a better way of doing this? I’d still like to stick with the input slider if possible. Thanks!
I appreciate a good starting point.