summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--images/90s-tape.gifbin0 -> 991597 bytes
-rw-r--r--images/cool-deck.gifbin0 -> 286555 bytes
-rw-r--r--images/grungy-deck.gifbin0 -> 1775498 bytes
-rw-r--r--images/narrow-window.gifbin0 -> 396776 bytes
-rw-r--r--images/side-a.jpegbin0 -> 292257 bytes
-rw-r--r--images/side-b.jpegbin0 -> 292666 bytes
-rw-r--r--images/side-c.jpegbin0 -> 83862 bytes
-rw-r--r--images/tape-window.gifbin0 -> 1167270 bytes
-rw-r--r--index.html15
-rw-r--r--sideA.json100
-rw-r--r--tape-deck.html12
-rw-r--r--tape-deck.js45
12 files changed, 172 insertions, 0 deletions
diff --git a/images/90s-tape.gif b/images/90s-tape.gif
new file mode 100644
index 0000000..c00fdaa
--- /dev/null
+++ b/images/90s-tape.gif
Binary files differ
diff --git a/images/cool-deck.gif b/images/cool-deck.gif
new file mode 100644
index 0000000..a172194
--- /dev/null
+++ b/images/cool-deck.gif
Binary files differ
diff --git a/images/grungy-deck.gif b/images/grungy-deck.gif
new file mode 100644
index 0000000..d296776
--- /dev/null
+++ b/images/grungy-deck.gif
Binary files differ
diff --git a/images/narrow-window.gif b/images/narrow-window.gif
new file mode 100644
index 0000000..f8f04ed
--- /dev/null
+++ b/images/narrow-window.gif
Binary files differ
diff --git a/images/side-a.jpeg b/images/side-a.jpeg
new file mode 100644
index 0000000..5c7106d
--- /dev/null
+++ b/images/side-a.jpeg
Binary files differ
diff --git a/images/side-b.jpeg b/images/side-b.jpeg
new file mode 100644
index 0000000..8f34079
--- /dev/null
+++ b/images/side-b.jpeg
Binary files differ
diff --git a/images/side-c.jpeg b/images/side-c.jpeg
new file mode 100644
index 0000000..5d7200a
--- /dev/null
+++ b/images/side-c.jpeg
Binary files differ
diff --git a/images/tape-window.gif b/images/tape-window.gif
new file mode 100644
index 0000000..0a10e6c
--- /dev/null
+++ b/images/tape-window.gif
Binary files differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8236d1e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang=en>
+ <head>
+ <meta charset=UTF-8>
+ <title>Tapes</title>
+ </head>
+ <body>
+ <a href="tape-deck.html?side=A">
+ <img src="images/side-a.jpeg">
+ </a>
+ <a href="tape-deck.html?side=B">
+ <img src="images/side-b.jpeg">
+ </a>
+ </body>
+</html>
diff --git a/sideA.json b/sideA.json
new file mode 100644
index 0000000..15d0a78
--- /dev/null
+++ b/sideA.json
@@ -0,0 +1,100 @@
+[
+ {
+ "title": "Won't You Be My Neighbor",
+ "artist": "Mister Rogers",
+ "album": "",
+ "start": 0,
+ "link": ""
+ },
+ {
+ "title": "A Star For Kitty Opera (edit)",
+ "artist": "Mister Rogers",
+ "album": "",
+ "start": 86,
+ "link": ""
+ },
+ {
+ "title": "Kojamyk",
+ "artist": "Huun Huur Tu",
+ "album": "Altai Sayan Tandy-Uula",
+ "start": 398,
+ "link": ""
+ },
+ {
+ "title": "Kongurai",
+ "artist": "Huun Huur Tu",
+ "album": "Altai Sayan Tandy-Uula",
+ "start": 626,
+ "link": ""
+ },
+ {
+ "title": "Clouds",
+ "artist": "Hiroshi Yoshimura",
+ "album": "Music for Nine Post Cards",
+ "start": 948,
+ "link": ""
+ },
+ {
+ "title": "Maple Syrup Factory",
+ "artist": "Hiroshi Yoshimura",
+ "album": "Flora",
+ "start": 1299,
+ "link": ""
+ },
+ {
+ "title": "Signed Curtain",
+ "artist": "Matching Mole",
+ "album": "Little Red Record (1972)",
+ "start": 1597,
+ "link": ""
+ },
+ {
+ "title": "In the Mouth a Desert",
+ "artist": "Pavement",
+ "album": "Slanted and Enchanted (1992)",
+ "start": 1784,
+ "link": ""
+ },
+ {
+ "title": "Bull in the Heather",
+ "artist": "Sonic Youth",
+ "album": "Goo",
+ "start": 2009,
+ "link": ""
+ },
+ {
+ "title": "Work in This Universe",
+ "artist": "Fulflej",
+ "album": "Wack Ass Tuba Riff",
+ "start": 2191,
+ "link": ""
+ },
+ {
+ "title": "School (live)",
+ "artist": "Nirvana",
+ "album": "Muddy Banks of the Wishkah",
+ "start": 2437,
+ "link": ""
+ },
+ {
+ "title": "Inuit Drum Dancing",
+ "artist": "Gjoa Haven Drum Dance Festival",
+ "album": "",
+ "start": 2585,
+ "link": "https://youtu.be/RW0Q6d8MrqI"
+ },
+ {
+ "title": "Khoomei",
+ "artist": "Huun Huur Tu",
+ "album": "Live",
+ "start": 2840,
+ "link": ""
+ },
+ {
+ "title": "Taiga",
+ "artist": "Huun Huur Tu",
+ "album": "Live",
+ "start": 3071,
+ "link": ""
+ }
+] \ No newline at end of file
diff --git a/tape-deck.html b/tape-deck.html
new file mode 100644
index 0000000..3203fd4
--- /dev/null
+++ b/tape-deck.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang=en>
+ <head>
+ <meta charset=UTF-8>
+ <title>2019 Mix Side A - Winter</title>
+ </head>
+ <body>
+ <img src="images/cool-deck.gif">
+ <p id="notes"></p>
+ <script src="tape-deck.js"></script>
+ </body>
+</html>
diff --git a/tape-deck.js b/tape-deck.js
new file mode 100644
index 0000000..7d75abc
--- /dev/null
+++ b/tape-deck.js
@@ -0,0 +1,45 @@
+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}.mp3`);
+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();
+
+ sfx.onended = (event) => {
+ tape.controls = true;
+ tape.play();
+ }
+
+ function isLastTrack() {
+ return currentTrackIndex + 1 === startTimes.length;
+ }
+
+ function getTrack(time) {
+ const nextIndex = currentTrackIndex + 1
+
+ if (isLastTrack()) {
+ 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;
+ });
+ });
+