3 files changed, 11 insertions, 6 deletions
diff --git a/images/cool-deck.png b/images/cool-deck.png
new file mode 100644
index 0000000..028659f
--- /dev/null
+++ b/images/cool-deck.png
diff --git a/tape-deck.html b/tape-deck.html
index 6a260ff..2d88d9c 100644
--- a/tape-deck.html
+++ b/tape-deck.html
@@ -7,7 +7,7 @@
     <body>
         <div display="flex">
             <div class="tape-deck">
-                <img src="images/cool-deck.gif">
+                <img id="tape-deck" src="images/cool-deck.png">
             </div>
             <div class="buttons" display="flex" flex-direction="row" justify-content="center">
                 <button id="playButton" onclick="play()">Play</button>
diff --git a/tape-deck.js b/tape-deck.js
index a682234..14ed83f 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -2,12 +2,14 @@ const urlParams = new URLSearchParams(window.location.search);
 const currentSide = urlParams.get("side");
 const tape = new Audio(`audio/2019-mix-side-${currentSide}.ogg`);
 
-const sfx = new Audio("audio/tape-start.mp3");
-sfx.onended = (event) => {
+const pressPlaySound = new Audio("audio/tape-start.mp3");
+pressPlaySound.onended = (event) => {
     tape.play();
 }
 
-let display = document.getElementById("notes");
+
+let deck = document.getElementById("tape-deck");
+let notes = document.getElementById("notes");
 let currentTrackIndex = 0;
 let hasStarted = false;
 
@@ -16,22 +18,25 @@ function play() {
         .then(response => response.json())
         .then((trackData) => {
             if (!hasStarted) {
-                sfx.play();
+                pressPlaySound.play();
                 hasStarted = true;
+                deck.src = "images/cool-deck.gif"
 
                 tape.addEventListener("timeupdate", (event) => {
                     const time = tape.currentTime;
                     const currentTrack = getTrack(time, currentTrackIndex, trackData);
-                    display.textContent = currentTrack.title;
+                    notes.textContent = currentTrack.title;
                 });
             } else {
                 tape.play();
+                deck.src = "images/cool-deck.gif"
             }
         });
 }
 
 function pause() {
     tape.pause();
+    deck.src = "images/cool-deck.png"
 }
 
 function isLastTrack(current, tracks) {