From a9a1509405804be9f329a4168515a607b1bbea1e Mon Sep 17 00:00:00 2001 From: Grant Shangreaux Date: Sun, 12 Jan 2020 23:19:28 -0600 Subject: Feature: resume playback from local storage of current tape time --- index.html | 17 +++++--- style.css | 19 +++++++++ tape-deck.html | 5 ++- tape-deck.js | 132 ++++++++++++++++++++++++++++++++++++++------------------- 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 @@ Tapes +
@@ -14,12 +15,18 @@

- - - - +
+

Winter

+ + + +
+
+

Spring

+ - + +
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 @@
- +

+ 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); }); -- cgit v1.2.3