adds audio player

audio.css

@@ -0,0 +1,79 @@
+#audioContainer
+{
+    margin-left: 25vw;
+    margin-right: 25vw;
+    margin-top: 5vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.audioPlayer
+{
+    background-color: rgb(43, 80, 201);
+    display: flex;
+    border: black solid 5px;
+    text-align: center;
+}
+
+.playButton
+{
+    margin: 1vw;
+    height: auto;
+    color: black;
+    background-color: transparent;
+    border: none;
+}
+
+
+.audioSlider
+{
+    width: 80%;
+    -webkit-appearance: none;
+    width: 100%;
+    height: 10px;
+    background:rgb(43, 80, 201);
+    background-image: url("images/bar.png");
+    outline: none;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+    overflow: hidden;
+    margin: auto;
+}
+
+.audioSlider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 15px;
+    height: 15px;
+    background: #000000;
+    box-shadow: -100vw 0px 0px 100vw #000000;
+}
+  
+.audioSlider::-moz-range-thumb {
+    width: 15px;
+    height: 15px;
+    background: #000000;
+}
+
+.audioSlider::-moz-range-progress {
+    width: 10px;
+    height: 10px;
+    background: #000000;
+}
+
+.timeContainer
+{
+    margin: auto;
+    margin-left: 1vw;
+}
+
+.durationContainer
+{
+    margin: auto;
+    margin-right: 1vw;
+}
+
+.timeSeparator
+{
+    margin: auto;
+}
+  

audioPlayer.js

@@ -0,0 +1,61 @@
+const audioList = document.getElementsByClassName('audioPlayer');
+var changingSlider = false
+
+function convertTime(timeInSec)
+{
+    const minutes = Math.floor(timeInSec / 60);
+    const seconds = Math.floor(timeInSec % 60);
+    const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+    return `${minutes}:${returnedSeconds}`;
+
+}
+
+Array.prototype.forEach.call(audioList, audio => {
+    // setup duration in slider and counter
+    audioElement = audio.getElementsByClassName("audioElement")[0];
+    audioElement.addEventListener('loadedmetadata', event => {
+        event.target.parentElement.getElementsByClassName("audioSlider")[0].max = event.target.duration
+        event.target.parentElement.getElementsByClassName("durationContainer")[0].innerHTML = convertTime(event.target.duration)
+    });
+
+    // 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) 
+        changingSlider = true;
+    })
+
+    // set slider to change part of music playing when used
+    audio.getElementsByClassName("audioSlider")[0].addEventListener("change", event => {
+        event.target.parentElement.getElementsByClassName("audioElement")[0].currentTime = event.target.value
+        changingSlider = false;
+    })
+
+    // set the audio element to change the sliders value whenever its time updates
+    audioElement.addEventListener("timeupdate", event => {
+        if (changingSlider)
+        {
+            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)
+    })
+
+    // set the play button
+    audio.getElementsByClassName("playButton")[0].addEventListener("click", event => {
+        if (event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].paused)
+        {
+        event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].play()
+        event.target.src = "images/pause.png"
+        }
+        else
+        {
+        event.target.parentElement.parentElement.parentElement.getElementsByClassName("audioElement")[0].pause()
+        event.target.src = "images/play.png"
+        }
+    })
+    
+});
+
+
+

index.html

@@ -14,7 +14,7 @@
                 a game composer
             </h2>
             <div id = "menu">
-                <a>my work</a>
+                <a href = "my-work.html">my work</a>
                 |
                 <a>about me</a>
                 |

mainpage.css

@@ -4,6 +4,12 @@ html
     background-color: rgb(43, 80, 201);
 }
 
+a:link, a:visited
+{
+    text-decoration: none;
+    color: black;;
+}
+
 h1
 {
     text-align: center;
@@ -28,7 +34,7 @@ h2
     text-align: center;
     display: flexbox;
     font-size: 0;
-    justify-content: space-between;
+    justify-content: center;
 
     transition: font-size 1s;
 }

my-work.css

@@ -0,0 +1,19 @@
+html
+{
+    font-family: 'VT323', monospace;
+    background-color: rgb(43, 80, 201);
+    color: rgb(0, 0, 0);
+}
+
+h1
+{
+    margin-left: 10vw;
+    margin-top: 10vh;
+}
+
+audio
+{
+    background-color: rgb(43, 80, 201);
+    border-radius: 0px;
+}
+

my-work.html

@@ -0,0 +1,65 @@
+<HTML>
+    <head>
+        <link rel = "stylesheet" href = "my-work.css">
+        <link rel = "stylesheet" href = "audio.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+        
+        <script src = "audioPlayer.js" defer></script>
+    </head>
+    <body id = "body">
+            <h1 id = "title">
+                My Work
+            </h1>
+            <div id = "audioContainer">
+                song name
+                <div class = "audioPlayer">
+                    <audio class = "audioElement" src = "audio/twoTrucks.mp3" preload=”metadata” loop></audio>
+                    <div class = "playButtonContainer">
+                        <button class = "playButton"><img src = "images/play.png"></button>
+                    </div>
+                    <input type="range" class="audioSlider" max="100" value="0">
+                    <span class = "timeContainer">
+                        0:00
+                    </span>
+                    <span class = "timeSeparator">/</span>
+                    <span class = "durationContainer">
+                        0:00
+                    </span>
+                </div>
+
+                song name
+                <div class = "audioPlayer">
+                    <audio class = "audioElement" src = "audio/goodbyeHorses.mp3" preload=”metadata” loop></audio>
+                    <div class = "playButtonContainer">
+                        <button class = "playButton"><img src = "images/play.png"></button>
+                    </div>
+                    <input type="range" class="audioSlider" max="100" value="0">
+                    <span class = "timeContainer">
+                        0:00
+                    </span>
+                    <span class = "timeSeparator">/</span>
+                    <span class = "durationContainer">
+                        0:00
+                    </span>
+                </div>
+
+                song name
+                <div class = "audioPlayer">
+                    <audio class = "audioElement" src = "audio/ratsBirthdayMixtape.mp3" preload=”metadata” loop></audio>
+                    <div class = "playButtonContainer">
+                        <button class = "playButton"><img src = "images/play.png"></button>
+                    </div>
+                    <input type="range" class="audioSlider" max="100" value="0">
+                    <span class = "timeContainer">
+                        0:00
+                    </span>
+                    <span class = "timeSeparator">/</span>
+                    <span class = "durationContainer">
+                        0:00
+                    </span>
+                </div>
+            </div>
+    </body>
+</HTML>

pageLoadAnim.js

@@ -0,0 +1,5 @@
+
+setTimeout(() => {
+    document.getElementById("body").style = "color: rgba(0, 0, 0, 255)"
+}, 2500); 
+// you may not be able to transition text colour, there are other ways using animation so look into that