From 51e62c3f0ee38e4bff4fde336c7d5523ce8c3818 Mon Sep 17 00:00:00 2001 From: Grant Shangreaux Date: Sat, 4 Jan 2020 21:49:31 -0600 Subject: Add: still image of tape deck when stopped or paused --- images/cool-deck.png | Bin 0 -> 113475 bytes tape-deck.html | 2 +- tape-deck.js | 15 ++++++++++----- 3 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 images/cool-deck.png diff --git a/images/cool-deck.png b/images/cool-deck.png new file mode 100644 index 0000000..028659f Binary files /dev/null and b/images/cool-deck.png differ diff --git a/tape-deck.html b/tape-deck.html index 6a260ff..2d88d9c 100644 --- a/tape-deck.html +++ b/tape-deck.html @@ -7,7 +7,7 @@
- +
diff --git a/tape-deck.js b/tape-deck.js index a682234..14ed83f 100644 --- a/tape-deck.js +++ b/tape-deck.js @@ -2,12 +2,14 @@ const urlParams = new URLSearchParams(window.location.search); const currentSide = urlParams.get("side"); const tape = new Audio(`audio/2019-mix-side-${currentSide}.ogg`); -const sfx = new Audio("audio/tape-start.mp3"); -sfx.onended = (event) => { +const pressPlaySound = new Audio("audio/tape-start.mp3"); +pressPlaySound.onended = (event) => { tape.play(); } -let display = document.getElementById("notes"); + +let deck = document.getElementById("tape-deck"); +let notes = document.getElementById("notes"); let currentTrackIndex = 0; let hasStarted = false; @@ -16,22 +18,25 @@ function play() { .then(response => response.json()) .then((trackData) => { if (!hasStarted) { - sfx.play(); + pressPlaySound.play(); hasStarted = true; + deck.src = "images/cool-deck.gif" tape.addEventListener("timeupdate", (event) => { const time = tape.currentTime; const currentTrack = getTrack(time, currentTrackIndex, trackData); - display.textContent = currentTrack.title; + notes.textContent = currentTrack.title; }); } else { tape.play(); + deck.src = "images/cool-deck.gif" } }); } function pause() { tape.pause(); + deck.src = "images/cool-deck.png" } function isLastTrack(current, tracks) { -- cgit v1.2.3