Feature: resume playback from local storage of current tape time

author: Grant Shangreaux <shshoshin@protonmail.com> 2020-01-12 23:19:28 -0600
committer: Grant Shangreaux <shshoshin@protonmail.com> 2020-01-12 23:19:28 -0600
commit: a9a1509405804be9f329a4168515a607b1bbea1e (patch)
tree: 23f50719bf82563646ba387b253a15ac8ae1ddad
parent: 70fb6d7c519d1a81afcc6cbe5aeb6f3b6850e3e6 (diff)
4 files changed, 124 insertions, 49 deletions
diff --git a/index.html b/index.html
index e14179f..4624cfc 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
         <meta charset=UTF-8>
         <link rel="stylesheet" type="text/css" href="style.css">
         <title>Tapes</title>
+        <script src="/skewer"></script>
     </head>
     <body>
         <div class="intro">
@@ -14,12 +15,18 @@
             </p>
         </div>
         <div class="tape-container">
-            <a href="tape-deck.html?side=A">
-                <img src="images/side-a.jpeg" class="tape">
-            </a>
-            <a href="tape-deck.html?side=B">
+            <div class="side">
+                <h3>Winter</h3>
+                <a href="tape-deck.html?side=A">
+                    <img src="images/side-a.jpeg" class="tape">
+                </a>
+            </div>
+            <div class="side">
+                <h3>Spring</h3>
+                <a href="tape-deck.html?side=B">
                 <img src="images/side-b.jpeg" class="tape">
-            </a>
+                </a>
+            </div>
         </div>
     </body>
 </html>
diff --git a/style.css b/style.css
index b76978d..adb51fa 100644
--- a/style.css
+++ b/style.css
@@ -20,6 +20,7 @@ p {
     display: flex;
     margin: auto;
     width: 95%;
+    justify-content: center;
 }
 
 .tape {
@@ -28,6 +29,19 @@ p {
     max-width: 50vw;
 }
 
+.side {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: auto;
+    width: 100%;
+}
+
+h3 {
+    margin: auto;
+    padding-bottom: .25em;
+}
+
 .tape-deck-container {
     display: flex;
     flex-direction: column;
@@ -47,6 +61,11 @@ p {
 }
 
 button {
+    width: 10%;
+    margin: auto;
+}
+
+.touch-button {
     margin: 0;
     padding: 0;
     background: lightblue;
diff --git a/tape-deck.html b/tape-deck.html
index 21eeda2..1366fe5 100644
--- a/tape-deck.html
+++ b/tape-deck.html
@@ -11,11 +11,14 @@
                 <img id="tape-deck" class="tape-deck-img" src="images/cool-deck.png">
             </div>
             <div class="button-container">
-                <button onclick="play()"><img class="play-button" id="play-button" src="images/play-button-up.png"></button>
+                <button onclick="play()" class="touch-button">
+                    <img class="play-button" id="play-button" src="images/play-button-up.png">
+                </button>
             </div>
             <div class="notes">
                 <p id="notes"></p>
             </div>
+            <button onclick="reset()"> reset tape </button>
         </div>
         <script src="tape-deck.js"></script>
     </body>
diff --git a/tape-deck.js b/tape-deck.js
index f730600..7362feb 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -1,54 +1,78 @@
 const urlParams = new URLSearchParams(window.location.search);
 const currentSide = urlParams.get("side");
-const tape = new Audio(`audio/2019-mix-side-${currentSide}.mp3`);
+const Cassette = new Audio(`audio/2019-mix-side-${currentSide}.mp3`);
+
+let TapeDeck = {
+    elem: document.getElementById("tape-deck"),
+    notes: document.getElementById("notes"),
+    trackData: [],
+    currentTrackIndex: 0,
+    hasStarted: false,
+    isPlaying: false,
+    images: { stop: "images/cool-deck.png", go: "images/cool-deck.gif" },
+    go: function () {
+        this.elem.src = this.images.go;
+        this.isPlaying = true;
+    },
+    stop: function () {
+        this.elem.src = this.images.stop;
+        this.isPlaying = false;
+    },
+    playButton: {
+        elem: document.getElementById("play-button"),
+        state: "off",
+        up: "images/play-button-up.png",
+        down: "images/play-button-down.png",
+        initSound: new Audio("audio/tape-start.mp3"),
+        pressSound: new Audio("audio/button-press.mp3"),
+        toggle: function () {
+            if (this.state === "off") {
+                this.elem.src = this.down;
+                this.state = "on";
+            } else {
+                this.elem.src = this.up;
+                this.state = "off";
+            }
+        }
+    }
+};
 
-const pressPlaySound = new Audio("audio/tape-start.mp3");
-const buttonPressSound = new Audio("audio/button-press.mp3");
-pressPlaySound.onended = (event) => { tape.play(); };
+function start() {
+    const btn = TapeDeck.playButton;
 
-const stopImage = "images/cool-deck.png";
-const playImage = "images/cool-deck.gif";
+    TapeDeck.hasStarted = true;
+    btn.toggle();
+    btn.initSound.onended = (event) => { Cassette.play(); };
+    btn.initSound.play();
+}
 
-let playButton = document.getElementById("play-button");
-const playButtonUp = "images/play-button-up.png";
-const playButtonDown = "images/play-button-down.png";
+function pause() {
+    const btn = TapeDeck.playButton;
 
-let deck = document.getElementById("tape-deck");
-let notes = document.getElementById("notes");
-let trackData = [];
-let currentTrackIndex = 0;
-let hasStarted = false;
-let isPlaying = false;
+    btn.toggle();
+    btn.pressSound.play();
+    Cassette.pause();
+    TapeDeck.stop();
+}
 
-function loadTrackData() {
-    fetch(`side${currentSide}.json`)
-        .then(response => response.json())
-        .then((data) => {
-            trackData = data;
-        });
+function resume() {
+    const btn = TapeDeck.playButton;
+
+    btn.pressSound.play();
+    btn.toggle();
+    Cassette.play();
 }
 
+// button onclick points here
 function play() {
-  if (isPlaying) {
-        playButton.src = playButtonUp;
-        buttonPressSound.play();
-        tape.pause();
-        deck.src = stopImage;
-        isPlaying = false;
-        return;
-    }
+    if (TapeDeck.isPlaying) { pause(); return; }
 
-    if (!hasStarted) {
-        pressPlaySound.play();
-        hasStarted = true;
-    } else {
-        buttonPressSound.play();
-        tape.play();
-    }
+    TapeDeck.hasStarted ? resume() : start();
+    TapeDeck.go();
+}
 
-    isPlaying = true;
-    playButton.src = playButtonDown;
-    deck.src = playImage;
+function reset() {
+    Cassette.currentTime = 0;
 }
 
 function isLastTrack(current, tracks) {
@@ -56,6 +80,7 @@ function isLastTrack(current, tracks) {
 }
 
 function getTrack(time) {
+    const { currentTrackIndex, trackData } = TapeDeck;
     const nextIndex = currentTrackIndex + 1;
     const startTimes = trackData.map( t => t.start );
 
@@ -63,7 +88,7 @@ function getTrack(time) {
         return trackData[trackData.length - 1];
     } else {
         if (time >= startTimes[nextIndex]) {
-            currentTrackIndex = nextIndex;
+            TapeDeck.currentTrackIndex = nextIndex;
         }
 
         return trackData[currentTrackIndex];
@@ -83,10 +108,31 @@ function formatTrackData(track) {
     return string;
 }
 
+function loadTrackData() {
+    fetch(`side${currentSide}.json`)
+        .then(response => response.json())
+        .then((data) => {
+            TapeDeck.trackData = data;
+        });
+}
+
+function resumeMaybe() {
+    if (localStorage.getItem(currentSide)) {
+        Cassette.currentTime = localStorage.getItem(currentSide);
+    }
+}
+
 loadTrackData();
 
-tape.addEventListener("timeupdate", (event) => {
-    const time = tape.currentTime;
+resumeMaybe();
+
+Cassette.addEventListener("timeupdate", (event) => {
+    const time = Cassette.currentTime;
     const currentTrack = getTrack(time);
-    notes.textContent = formatTrackData(currentTrack);
+
+    localStorage.setItem(currentSide, time);
+
+    if (!currentTrack) return;
+
+    TapeDeck.notes.textContent = formatTrackData(currentTrack);
 });
author	Grant Shangreaux <shshoshin@protonmail.com>	2020-01-12 23:19:28 -0600
committer	Grant Shangreaux <shshoshin@protonmail.com>	2020-01-12 23:19:28 -0600
commit	a9a1509405804be9f329a4168515a607b1bbea1e (patch)
tree	23f50719bf82563646ba387b253a15ac8ae1ddad
parent	70fb6d7c519d1a81afcc6cbe5aeb6f3b6850e3e6 (diff)