final changes to audio player

audio.css

@@ -36,7 +36,7 @@
     outline: none;
     -webkit-transition: .2s;
     transition: opacity .2s;
-    overflow: hidden;
+    /*  overflow: hidden;*/
     margin: auto;
 }
 
@@ -45,7 +45,7 @@
     width: 15px;
     height: 15px;
     background: #000000;
-    box-shadow: -100vw 0px 0px 100vw #000000;
+    /*box-shadow: -100vw 0px 0px 100vw #000000;*/
 }
   
 .audioSlider::-moz-range-thumb {
@@ -76,4 +76,9 @@
 {
     margin: auto;
 }
+
+.songTitle
+{
+    margin-top: 2vh;
+}
   

audioPlayer.js

@@ -10,6 +10,12 @@ function convertTime(timeInSec)
 
 }
 
+function updateSliderBg(slider)
+{
+    var value = (slider.value-slider.min)/(slider.max-slider.min)*100
+    slider.style.background = 'url("images/bar.png"), linear-gradient(to right, #000000 0%, #000000 ' + value + '%, transparent ' + value + '%, transparent 100%)'
+}
+
 Array.prototype.forEach.call(audioList, audio => {
     // setup duration in slider and counter
     audioElement = audio.getElementsByClassName("audioElement")[0];
@@ -21,6 +27,7 @@ Array.prototype.forEach.call(audioList, audio => {
     // set up slider to change counter when used
     audio.getElementsByClassName("audioSlider")[0].addEventListener("input", event => {
         event.target.parentElement.getElementsByClassName("timeContainer")[0].innerHTML  = convertTime(event.target.value) 
+        updateSliderBg(event.target)
         changingSlider = true;
     })
 
@@ -37,8 +44,13 @@ Array.prototype.forEach.call(audioList, audio => {
             return
         }
         event.target.parentElement.getElementsByClassName("audioSlider")[0].value = Math.floor(event.target.currentTime)
-        console.log("pogging")
         event.target.parentElement.getElementsByClassName("timeContainer")[0].innerHTML = convertTime(event.target.currentTime)
+        updateSliderBg(event.target.parentElement.getElementsByClassName("audioSlider")[0])
+    })
+
+    audioElement.addEventListener("ended", event => {
+        event.target.currentTime = 0
+        event.target.parentElement.getElementsByClassName("playButton")[0].children[0].src = "images/play.png"
     })
 
     // set the play button
@@ -54,7 +66,6 @@ Array.prototype.forEach.call(audioList, audio => {
         event.target.src = "images/play.png"
         }
     })
-    
 });
 
 

my-work.html

@@ -13,9 +13,9 @@
                 My Work
             </h1>
             <div id = "audioContainer">
-                song name
+                <div class = "songTitle">two trucks having sex</div>
                 <div class = "audioPlayer">
-                    <audio class = "audioElement" src = "audio/twoTrucks.mp3" preload=”metadata” loop></audio>
+                    <audio class = "audioElement" src = "audio/twoTrucks.mp3" preload=”metadata”></audio>
                     <div class = "playButtonContainer">
                         <button class = "playButton"><img src = "images/play.png"></button>
                     </div>
@@ -29,9 +29,9 @@
                     </span>
                 </div>
 
-                song name
+                <div class = "songTitle">goodbye horses</div>
                 <div class = "audioPlayer">
-                    <audio class = "audioElement" src = "audio/goodbyeHorses.mp3" preload=”metadata” loop></audio>
+                    <audio class = "audioElement" src = "audio/goodbyeHorses.mp3" preload=”metadata”></audio>
                     <div class = "playButtonContainer">
                         <button class = "playButton"><img src = "images/play.png"></button>
                     </div>
@@ -45,9 +45,9 @@
                     </span>
                 </div>
 
-                song name
+                <div class = "songTitle">rats birthday mixtape</div>
                 <div class = "audioPlayer">
-                    <audio class = "audioElement" src = "audio/ratsBirthdayMixtape.mp3" preload=”metadata” loop></audio>
+                    <audio class = "audioElement" src = "audio/ratsBirthdayMixtape.mp3" preload=”metadata”></audio>
                     <div class = "playButtonContainer">
                         <button class = "playButton"><img src = "images/play.png"></button>
                     </div>