tape-deck.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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;
        });
    });