sussy-audio-player/index.js

const trackInfo = {
    "supernova": {
        bpm: 128,
        offset: 0.6,
        length: 326.92,
        sig: 4,
        url: "./supernova.mp3",
        bg: "./linuth.png",
    },
    "amogus": {
        bpm: 160,
        offset: 0.412,
        length: 125,
        sig: 4,
        url: "./amogus.mp3",
        bg: "./amogus.jpg",
    },
    "overkill": {
        bpm: 174,
        offset: 4.9,
        length: 342,
        sig: 4,
        url: "./overkill.mp3",
        bg: "./overkill.png",
    },
}

let playing = false;

let trackData;

function loadParams(_trackName) {
    let errore = document.getElementById("errore");
    document.getElementById("butoon").style.display = "none";
    errore.style.display = "none";

    let trackName = "supernova";
    if (_trackName) trackName = _trackName.substring(1);
    if (trackInfo[trackName] === undefined) {
        errore.innerText = `Invalid track ${trackName}`;
        errore.style.display = "initial";
        document.getElementById("bg").style.backgroundImage = ``;
        return;
    }

    trackData = trackInfo[trackName];
    trackData.beatInterval = 60 / trackData.bpm;

    document.getElementById("bg").style.backgroundImage = `url("${trackInfo[trackName].bg}")`;
    document.getElementById("butoon").style.display = "initial";
}

let lastBeatVal = 0;

const ctx = new AudioContext();
let startTime = 0;

function toTimestamp(_time) {
    let time = Math.round(_time);
    let hours = Math.floor(time / 3600);
    let minutes = Math.floor((time / 60) % 60);
    let seconds = Math.floor(time % 60);

    let out = "";
    if (hours !== 0) {
        out += `${hours}:`;
        if (minutes < 10) out += "0";
    }

    out += `${minutes}:`;
    if (seconds < 10) out += "0";
    out += seconds;
    return out;
}

function start() {
    document.getElementById("wrapper").remove();
    playing = true;

    ctx.resume().then(() => {
        const source = ctx.createBufferSource();

        let request = new XMLHttpRequest();
        request.open('GET', trackData.url, true);
        request.responseType = 'arraybuffer';

        request.onload = function() {
            ctx.decodeAudioData(request.response, function(buf) {
                source.buffer = buf;
                source.connect(ctx.destination);
                source.start(ctx.currentTime);
                startTime = ctx.currentTime;

                requestAnimationFrame(onAnimationFrame);
            });
        }

        request.send();
    });
}

function onAnimationFrame() {
    let time = (ctx.currentTime - startTime) - (ctx.outputLatency || ctx.baseLatency);
    if (time < trackData.length && time > 0) {
        //console.log("Base latency", ctx.baseLatency, "Output latency", ctx.outputLatency);
        document.getElementById("time").innerText = `${toTimestamp(time)} / ${toTimestamp(trackData.length)}`;
        document.getElementById("progress").style.width = (time / trackData.length) * 100 + "%";
        console.log("yeet 2");

        if (time > trackData.offset) {
            let beats = (time - trackData.offset) / trackData.beatInterval;
            let beatsF = Math.floor(beats);
            let beatProgress = beats % 1;

            if (beatProgress < lastBeatVal) {
                console.log('AMOGUS', beatsF);
            }

            lastBeatVal = beatProgress;

            let beat = document.getElementById("beat");
            beat.style.width = `${(1 - beatProgress) * 100}%`;

            let bg = document.getElementById("bg");
            let startingScale = beatsF % trackData.sig === 0 ? 1.25 : 1.10;
            let scale = startingScale * (1 - (beatProgress * 0.25));
            if (scale < 1) scale = 1;
            bg.style.transform = `scale(${scale})`;
        }
    }

    requestAnimationFrame(onAnimationFrame);
}

window.onload = function() {
    let tracks = document.getElementById("tracks");

    for (const track in trackInfo) {
        let a = document.createElement("a");
        a.href = "#" + track;
        a.innerText = track;
        tracks.appendChild(a);
    }

    loadParams(window.location.hash);
}

window.onhashchange = function() {
    if (playing === true) window.location.reload();
    loadParams(window.location.hash);
}