diff options
| -rw-r--r-- | index.html | 17 | ||||
| -rw-r--r-- | style.css | 19 | ||||
| -rw-r--r-- | tape-deck.html | 5 | ||||
| -rw-r--r-- | tape-deck.js | 132 |
4 files changed, 124 insertions, 49 deletions
@@ -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> @@ -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); }); |