diff options
| -rw-r--r-- | images/90s-tape.gif | bin | 0 -> 991597 bytes | |||
| -rw-r--r-- | images/cool-deck.gif | bin | 0 -> 286555 bytes | |||
| -rw-r--r-- | images/grungy-deck.gif | bin | 0 -> 1775498 bytes | |||
| -rw-r--r-- | images/narrow-window.gif | bin | 0 -> 396776 bytes | |||
| -rw-r--r-- | images/side-a.jpeg | bin | 0 -> 292257 bytes | |||
| -rw-r--r-- | images/side-b.jpeg | bin | 0 -> 292666 bytes | |||
| -rw-r--r-- | images/side-c.jpeg | bin | 0 -> 83862 bytes | |||
| -rw-r--r-- | images/tape-window.gif | bin | 0 -> 1167270 bytes | |||
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | sideA.json | 100 | ||||
| -rw-r--r-- | tape-deck.html | 12 | ||||
| -rw-r--r-- | tape-deck.js | 45 |
12 files changed, 172 insertions, 0 deletions
diff --git a/images/90s-tape.gif b/images/90s-tape.gif Binary files differnew file mode 100644 index 0000000..c00fdaa --- /dev/null +++ b/images/90s-tape.gif diff --git a/images/cool-deck.gif b/images/cool-deck.gif Binary files differnew file mode 100644 index 0000000..a172194 --- /dev/null +++ b/images/cool-deck.gif diff --git a/images/grungy-deck.gif b/images/grungy-deck.gif Binary files differnew file mode 100644 index 0000000..d296776 --- /dev/null +++ b/images/grungy-deck.gif diff --git a/images/narrow-window.gif b/images/narrow-window.gif Binary files differnew file mode 100644 index 0000000..f8f04ed --- /dev/null +++ b/images/narrow-window.gif diff --git a/images/side-a.jpeg b/images/side-a.jpeg Binary files differnew file mode 100644 index 0000000..5c7106d --- /dev/null +++ b/images/side-a.jpeg diff --git a/images/side-b.jpeg b/images/side-b.jpeg Binary files differnew file mode 100644 index 0000000..8f34079 --- /dev/null +++ b/images/side-b.jpeg diff --git a/images/side-c.jpeg b/images/side-c.jpeg Binary files differnew file mode 100644 index 0000000..5d7200a --- /dev/null +++ b/images/side-c.jpeg diff --git a/images/tape-window.gif b/images/tape-window.gif Binary files differnew file mode 100644 index 0000000..0a10e6c --- /dev/null +++ b/images/tape-window.gif 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; + }); + }); + |
