2 files changed, 55 insertions, 34 deletions
diff --git a/tape-deck.html b/tape-deck.html
index 3203fd4..6a260ff 100644
--- a/tape-deck.html
+++ b/tape-deck.html
@@ -5,8 +5,18 @@
         <title>2019 Mix Side A - Winter</title>
     </head>
     <body>
-        <img src="images/cool-deck.gif">
-        <p id="notes"></p>
+        <div display="flex">
+            <div class="tape-deck">
+                <img src="images/cool-deck.gif">
+            </div>
+            <div class="buttons" display="flex" flex-direction="row" justify-content="center">
+                <button id="playButton" onclick="play()">Play</button>
+                <button id="pauseButton" onclick="pause()">Pause</button>
+            </div>
+            <div class="notes">
+                <p id="notes"></p>
+            </div>
+        </div>
         <script src="tape-deck.js"></script>
     </body>
 </html>
diff --git a/tape-deck.js b/tape-deck.js
index c5b8db7..a682234 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -1,44 +1,55 @@
 const urlParams = new URLSearchParams(window.location.search);
 const currentSide = urlParams.get("side");
-const sfx = new Audio("audio/tape-start.mp3");
 const tape = new Audio(`audio/2019-mix-side-${currentSide}.ogg`);
-let display = document.getElementById("notes");
-let currentTrackIndex = 0;
-
-fetch(`side${currentSide}.json`)
-    .then(response => response.json())
-    .then((trackData) => {
-        const startTimes = trackData.map( t => t.start );
 
-        sfx.play();
+const sfx = new Audio("audio/tape-start.mp3");
+sfx.onended = (event) => {
+    tape.play();
+}
 
-        sfx.onended = (event) => {
-            tape.controls = true;
-            tape.play();
-        }
+let display = document.getElementById("notes");
+let currentTrackIndex = 0;
+let hasStarted = false;
+
+function play() {
+    fetch(`side${currentSide}.json`)
+        .then(response => response.json())
+        .then((trackData) => {
+            if (!hasStarted) {
+                sfx.play();
+                hasStarted = true;
+
+                tape.addEventListener("timeupdate", (event) => {
+                    const time = tape.currentTime;
+                    const currentTrack = getTrack(time, currentTrackIndex, trackData);
+                    display.textContent = currentTrack.title;
+                });
+            } else {
+                tape.play();
+            }
+        });
+}
 
-        function isLastTrack() {
-            return currentTrackIndex + 1 === startTimes.length;
-        }
+function pause() {
+    tape.pause();
+}
 
-        function getTrack(time) {
-            const nextIndex = currentTrackIndex + 1
+function isLastTrack(current, tracks) {
+    return current + 1 === tracks.length;
+}
 
-            if (isLastTrack()) {
-                return trackData[trackData.length - 1];
-            } else {
-                if (time >= startTimes[nextIndex]) {
-                    currentTrackIndex = nextIndex;
-                }
+function getTrack(time, currentTrackIndex, trackData) {
+    const nextIndex = currentTrackIndex + 1
+    const startTimes = trackData.map( t => t.start );
 
-                return trackData[currentTrackIndex];
-            }
+    if (isLastTrack(currentTrackIndex, startTimes)) {
+        return trackData[trackData.length - 1];
+    } else {
+        if (time >= startTimes[nextIndex]) {
+            currentTrackIndex = nextIndex;
         }
 
+        return trackData[currentTrackIndex];
+    }
+}
 
-        tape.addEventListener("timeupdate", (event) => {
-            const time = tape.currentTime;
-            const currentTrack = getTrack(time, trackData);
-            display.textContent = currentTrack.title;
-        });
-    });