From 51489ec22a7ad046eedaf3268859fd13defda0ca Mon Sep 17 00:00:00 2001 From: Grant Shangreaux Date: Sat, 4 Jan 2020 21:38:00 -0600 Subject: Add: play and pause buttons to tape deck --- tape-deck.html | 14 +++++++++-- tape-deck.js | 75 +++++++++++++++++++++++++++++++++------------------------- 2 files changed, 55 insertions(+), 34 deletions(-) diff --git a/tape-deck.html b/tape-deck.html index 3203fd4..6a260ff 100644 --- a/tape-deck.html +++ b/tape-deck.html @@ -5,8 +5,18 @@ 2019 Mix Side A - Winter - -

+
+
+ +
+
+ + +
+
+

+
+
diff --git a/tape-deck.js b/tape-deck.js index c5b8db7..a682234 100644 --- a/tape-deck.js +++ b/tape-deck.js @@ -1,44 +1,55 @@ const urlParams = new URLSearchParams(window.location.search); const currentSide = urlParams.get("side"); -const sfx = new Audio("audio/tape-start.mp3"); const tape = new Audio(`audio/2019-mix-side-${currentSide}.ogg`); -let display = document.getElementById("notes"); -let currentTrackIndex = 0; - -fetch(`side${currentSide}.json`) - .then(response => response.json()) - .then((trackData) => { - const startTimes = trackData.map( t => t.start ); - sfx.play(); +const sfx = new Audio("audio/tape-start.mp3"); +sfx.onended = (event) => { + tape.play(); +} - sfx.onended = (event) => { - tape.controls = true; - tape.play(); - } +let display = document.getElementById("notes"); +let currentTrackIndex = 0; +let hasStarted = false; + +function play() { + fetch(`side${currentSide}.json`) + .then(response => response.json()) + .then((trackData) => { + if (!hasStarted) { + sfx.play(); + hasStarted = true; + + tape.addEventListener("timeupdate", (event) => { + const time = tape.currentTime; + const currentTrack = getTrack(time, currentTrackIndex, trackData); + display.textContent = currentTrack.title; + }); + } else { + tape.play(); + } + }); +} - function isLastTrack() { - return currentTrackIndex + 1 === startTimes.length; - } +function pause() { + tape.pause(); +} - function getTrack(time) { - const nextIndex = currentTrackIndex + 1 +function isLastTrack(current, tracks) { + return current + 1 === tracks.length; +} - if (isLastTrack()) { - return trackData[trackData.length - 1]; - } else { - if (time >= startTimes[nextIndex]) { - currentTrackIndex = nextIndex; - } +function getTrack(time, currentTrackIndex, trackData) { + const nextIndex = currentTrackIndex + 1 + const startTimes = trackData.map( t => t.start ); - return trackData[currentTrackIndex]; - } + if (isLastTrack(currentTrackIndex, startTimes)) { + return trackData[trackData.length - 1]; + } else { + if (time >= startTimes[nextIndex]) { + currentTrackIndex = nextIndex; } + return trackData[currentTrackIndex]; + } +} - tape.addEventListener("timeupdate", (event) => { - const time = tape.currentTime; - const currentTrack = getTrack(time, trackData); - display.textContent = currentTrack.title; - }); - }); -- cgit v1.2.3