From f6086f86cbc23fc0db538feafdda9e020e1763c8 Mon Sep 17 00:00:00 2001 From: Grant Shangreaux Date: Sat, 4 Jan 2020 17:28:10 -0600 Subject: Add: initial working tape-deck with 2019 mix Side A --- images/90s-tape.gif | Bin 0 -> 991597 bytes images/cool-deck.gif | Bin 0 -> 286555 bytes images/grungy-deck.gif | Bin 0 -> 1775498 bytes images/narrow-window.gif | Bin 0 -> 396776 bytes images/side-a.jpeg | Bin 0 -> 292257 bytes images/side-b.jpeg | Bin 0 -> 292666 bytes images/side-c.jpeg | Bin 0 -> 83862 bytes images/tape-window.gif | Bin 0 -> 1167270 bytes index.html | 15 +++++++ sideA.json | 100 +++++++++++++++++++++++++++++++++++++++++++++++ tape-deck.html | 12 ++++++ tape-deck.js | 45 +++++++++++++++++++++ 12 files changed, 172 insertions(+) create mode 100644 images/90s-tape.gif create mode 100644 images/cool-deck.gif create mode 100644 images/grungy-deck.gif create mode 100644 images/narrow-window.gif create mode 100644 images/side-a.jpeg create mode 100644 images/side-b.jpeg create mode 100644 images/side-c.jpeg create mode 100644 images/tape-window.gif create mode 100644 index.html create mode 100644 sideA.json create mode 100644 tape-deck.html create mode 100644 tape-deck.js diff --git a/images/90s-tape.gif b/images/90s-tape.gif new file mode 100644 index 0000000..c00fdaa Binary files /dev/null and b/images/90s-tape.gif differ diff --git a/images/cool-deck.gif b/images/cool-deck.gif new file mode 100644 index 0000000..a172194 Binary files /dev/null and b/images/cool-deck.gif differ diff --git a/images/grungy-deck.gif b/images/grungy-deck.gif new file mode 100644 index 0000000..d296776 Binary files /dev/null and b/images/grungy-deck.gif differ diff --git a/images/narrow-window.gif b/images/narrow-window.gif new file mode 100644 index 0000000..f8f04ed Binary files /dev/null and b/images/narrow-window.gif differ diff --git a/images/side-a.jpeg b/images/side-a.jpeg new file mode 100644 index 0000000..5c7106d Binary files /dev/null and b/images/side-a.jpeg differ diff --git a/images/side-b.jpeg b/images/side-b.jpeg new file mode 100644 index 0000000..8f34079 Binary files /dev/null and b/images/side-b.jpeg differ diff --git a/images/side-c.jpeg b/images/side-c.jpeg new file mode 100644 index 0000000..5d7200a Binary files /dev/null and b/images/side-c.jpeg differ diff --git a/images/tape-window.gif b/images/tape-window.gif new file mode 100644 index 0000000..0a10e6c Binary files /dev/null and b/images/tape-window.gif 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 @@ + + + + + Tapes + + + + + + + + + + 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 @@ + + + + + 2019 Mix Side A - Winter + + + +

+ + + 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; + }); + }); + -- cgit v1.2.3