From 75fb2e7094645193d1a4031d701214d3b08904ef Mon Sep 17 00:00:00 2001
From: atlastrinity <nyeevans@outlook.com>
Date: Mon, 27 Dec 2021 00:53:51 +0000
Subject: [PATCH] final changes to audio player

---
 audio.css      |  9 +++++++--
 audioPlayer.js | 15 +++++++++++++--
 my-work.html   | 12 ++++++------
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/audio.css b/audio.css
index 125c67d..f0c47f7 100644
--- a/audio.css
+++ b/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;
+}
   
\ No newline at end of file
diff --git a/audioPlayer.js b/audioPlayer.js
index 781e514..a3947e9 100644
--- a/audioPlayer.js
+++ b/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"
         }
     })
-    
 });
 
 
diff --git a/my-work.html b/my-work.html
index 3377732..1eb817f 100644
--- a/my-work.html
+++ b/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>