Add: hardware image play/pause button

1 files changed, 16 insertions, 5 deletions

diff --git a/tape-deck.js b/tape-deck.js
index 04b6d2d..3d10fe8 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -8,11 +8,16 @@ pressPlaySound.onended = (event) => { tape.play(); };
 const stopImage = "images/cool-deck.png";
 const playImage = "images/cool-deck.gif";
 
+let playButton = document.getElementById("play-button");
+const playButtonUp = "images/play-button-up.png";
+const playButtonDown = "images/play-button-down.png";
+
 let deck = document.getElementById("tape-deck");
 let notes = document.getElementById("notes");
 let trackData = [];
 let currentTrackIndex = 0;
 let hasStarted = false;
+let isPlaying = false;
 
 function loadTrackData() {
     fetch(`side${currentSide}.json`)
@@ -23,18 +28,24 @@ function loadTrackData() {
 }
 
 function play() {
+    if (isPlaying) {
+        playButton.src = playButtonUp;
+        tape.pause();
+        isPlaying = false;
+        deck.src = stopImage;
+        return;
+    }
+
     if (!hasStarted) {
         pressPlaySound.play();
         hasStarted = true;
     } else {
         tape.play();
     }
-    deck.src = playImage;
-}
 
-function pause() {
-    tape.pause();
-    deck.src = stopImage;
+    isPlaying = true;
+    playButton.src = playButtonDown;
+    deck.src = playImage;
 }
 
 function isLastTrack(current, tracks) {