diff options
| author | Grant Shangreaux <shshoshin@protonmail.com> | 2020-01-04 21:49:31 -0600 |
|---|---|---|
| committer | Grant Shangreaux <shshoshin@protonmail.com> | 2020-01-04 21:49:31 -0600 |
| commit | 51e62c3f0ee38e4bff4fde336c7d5523ce8c3818 (patch) | |
| tree | 46825df36f442f84dc1319ee7bd7efaa7695684a | |
| parent | 51489ec22a7ad046eedaf3268859fd13defda0ca (diff) | |
Add: still image of tape deck when stopped or paused
| -rw-r--r-- | images/cool-deck.png | bin | 0 -> 113475 bytes | |||
| -rw-r--r-- | tape-deck.html | 2 | ||||
| -rw-r--r-- | tape-deck.js | 15 |
3 files changed, 11 insertions, 6 deletions
diff --git a/images/cool-deck.png b/images/cool-deck.png Binary files differnew file mode 100644 index 0000000..028659f --- /dev/null +++ b/images/cool-deck.png 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 @@ <body> <div display="flex"> <div class="tape-deck"> - <img src="images/cool-deck.gif"> + <img id="tape-deck" src="images/cool-deck.png"> </div> <div class="buttons" display="flex" flex-direction="row" justify-content="center"> <button id="playButton" onclick="play()">Play</button> 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) { |
