summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGrant Shangreaux <shshoshin@protonmail.com>2020-01-04 22:06:03 -0600
committerGrant Shangreaux <shshoshin@protonmail.com>2020-01-04 22:06:03 -0600
commitaa59670b7f7a1a61f7c1cbbabcc08fc8ac6c7013 (patch)
treee3bbec5b2b139596419daa1b5d61bfbe2e1d4f10
parent51e62c3f0ee38e4bff4fde336c7d5523ce8c3818 (diff)
Add: formatting of additional track data to display
-rw-r--r--tape-deck.js60
1 files changed, 39 insertions, 21 deletions
diff --git a/tape-deck.js b/tape-deck.js
index 14ed83f..55aa4de 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -3,40 +3,38 @@ const currentSide = urlParams.get("side");
const tape = new Audio(`audio/2019-mix-side-${currentSide}.ogg`);
const pressPlaySound = new Audio("audio/tape-start.mp3");
-pressPlaySound.onended = (event) => {
- tape.play();
-}
+pressPlaySound.onended = (event) => { tape.play(); };
+const stopImage = "images/cool-deck.png";
+const playImage = "images/cool-deck.gif";
let deck = document.getElementById("tape-deck");
let notes = document.getElementById("notes");
+let trackData = [];
let currentTrackIndex = 0;
let hasStarted = false;
-function play() {
+function loadTrackData() {
fetch(`side${currentSide}.json`)
.then(response => response.json())
- .then((trackData) => {
- if (!hasStarted) {
- pressPlaySound.play();
- hasStarted = true;
- deck.src = "images/cool-deck.gif"
-
- tape.addEventListener("timeupdate", (event) => {
- const time = tape.currentTime;
- const currentTrack = getTrack(time, currentTrackIndex, trackData);
- notes.textContent = currentTrack.title;
- });
- } else {
- tape.play();
- deck.src = "images/cool-deck.gif"
- }
+ .then((data) => {
+ trackData = data;
});
}
+function play() {
+ if (!hasStarted) {
+ pressPlaySound.play();
+ hasStarted = true;
+ } else {
+ tape.play();
+ }
+ deck.src = playImage;
+}
+
function pause() {
tape.pause();
- deck.src = "images/cool-deck.png"
+ deck.src = stopImage;
}
function isLastTrack(current, tracks) {
@@ -44,7 +42,7 @@ function isLastTrack(current, tracks) {
}
function getTrack(time, currentTrackIndex, trackData) {
- const nextIndex = currentTrackIndex + 1
+ const nextIndex = currentTrackIndex + 1;
const startTimes = trackData.map( t => t.start );
if (isLastTrack(currentTrackIndex, startTimes)) {
@@ -58,3 +56,23 @@ function getTrack(time, currentTrackIndex, trackData) {
}
}
+function formatTrackData(track) {
+ let string = `${track.title} - ${track.artist}`;
+ if (track.album) {
+ string.concat(` - ${track.album}`)
+ }
+
+ if (track.link) {
+ string.concat(` - ${track.link}`)
+ }
+
+ return string;
+}
+
+loadTrackData();
+
+tape.addEventListener("timeupdate", (event) => {
+ const time = tape.currentTime;
+ const currentTrack = getTrack(time, currentTrackIndex, trackData);
+ notes.textContent = formatTrackData(currentTrack);
+});