Javascript Audio Player Sync Progress Bar Background Color or Image to currentTime

Javascript Audio Player Sync Progress Bar Background Color or Image to currentTime

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: http://newsletters.aaronestebancoaching.com/test1/1.html

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:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <title>Document</title>
  8. <style>
  9. #audio-container{
  10. position:relative;
  11. margin:auto;
  12. width:320px;
  13. height:90px;
  14. background:orange;
  15. border:2px solid black;
  16. margin-top:25px;
  17. }
  19. #play{
  20. background:url(images/play-sprite.png);
  21. background-position:0px 0px;
  22. width:60px;
  23. height:60px;
  24. float:left;
  25. cursor:pointer;
  26. margin-left:5px;
  27. }
  29. #play:hover{
  30. background-position:120px 0px;
  31. }
  33. #play:active{
  34. background-position:60px 0px;
  35. }
  37. #pause{
  38. background:url(images/pause-sprite.png);
  39. background-position:0px 0px;
  40. width:60px;
  41. height:60px;
  42. float:left;
  43. cursor:pointer;
  45. }
  47. #pause:hover{
  48. background-position:120px 0px;
  49. }
  51. #pause:active{
  52. background-position:60px 0px;
  53. }
  56. #audio-slider{
  57. position:relative;
  58. -webkit-appearance:none;
  59. appearance:none;
  60. width:98%;
  61. background:darkorange;
  62. border:1px solid brown;
  63. height:10px;
  64. border-radius:10px;
  65. outline:none;
  66. cursor:pointer;
  67. margin-left:2px;
  68. margin-top:5px;
  69. }
  71. #audio-slider::-webkit-slider-thumb{
  72. -webkit-appearance:none;
  73. appearance:none;
  74. width:10px;
  75. height:20px;
  76. border:1px solid black;
  77. background:brown;
  78. }
  80. #fill-bar{
  81. position:absolute;
  82. height:10px;
  83. border-top-left-radius:10px;
  84. border-bottom-left-radius:10px;
  85. margin-left:2px;
  86. margin-top:5px;
  87. width:0px;
  88. background:red;
  89. bottom:14px;
  90. left:1px;
  91. }
  93. </style>
  94. </head>
  95. <body>
  96. <div id="audio-container">
  97. <div id="play" onclick="play()"></div>
  98. <div id="pause" onclick="pause()"></div>
  100. <input type="range" id="audio-slider" min="0" value="0" step="1" onchange="seek()">
  101. <div id="fill-bar"></div>
  103. </div>
  104. </body>
  105. <script type="text/javascript">
  106. var audio = new Audio();
  107. var audioSlider = document.getElementById("audio-slider");
  108. var fillbar = document.getElementById("fill-bar");
  109. audio.src = "music/Song2.mp3";
  111. function play(){
  112. audio.play();
  113. }
  115. function pause(){
  116. audio.pause();
  117. }
  120. //sync the slider handle with the currentTime
  121. setInterval(updateSongSlider, 1000);
  122. function updateSongSlider(){
  123. var c = Math.round(audio.currentTime);
  124. audioSlider.value = c;
  125. fillbar.style.width = c + "px";
  127. var d = audio.duration
  128. audioSlider.setAttribute("max", d);
  130. }
  132. //set the currentTime to match users click on the progress bar
  133. function seek(){  
  134. audio.currentTime = audioSlider.value;
  135. play();
  136. }
  138. </script>
  140. </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.