Teascade.net/src/resources/beeping/main.js

var beeperBegun = false;
var beepInterval = 0;
var beepTimeCounter = 0;
var intervalId = 0;
var timeChangedWhileBegun = false;
var lastSec = -1;
var lastTimestampMs = 0;

var showBeep = 0;

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

function main() {
    timeChanged();
    updateInvalidness();

    document.getElementById("plus").onclick = () => changeSeconds(1);
    document.getElementById("minus").onclick = () => changeSeconds(-1);
    document.getElementById("time-input").onchange = () => {
        timeChanged();
        updateInvalidness();
    };
    document.getElementById("begin").onclick = toggle;
    var audio = document.getElementById("audio");
    let slider = document.getElementById("volume-slider");
    document.getElementById("volume-slider").onchange = () => {
        audio.volume = (slider.value / 100);
        document.getElementById("volume").innerText = slider.value;
    };

    document.getElementById("file").addEventListener('change', () => {
        var file = document.getElementById("file").files[0];
        document.getElementById("audiosource").setAttribute("src", URL.createObjectURL(file));
        document.getElementById("audio").load();
    });
    document.getElementById("audio").addEventListener("loadeddata", (event) => {
        document.getElementById("audiotext").innerText = "Loaded audio";
    });
    document.getElementById("audio").addEventListener("loadstart", (event) => {
        document.getElementById("audiotext").innerText = "Loading/Error";
    });

    console.log("Beeper initialized!");
}

function isTimeValid() {
    value = document.getElementById("time-input").value;
    if (value != "" && (isNaN(value) || value < 1)) {
        return false;
    }
    return true;
}

function getTime() {
    if (!isTimeValid()) {
        return 1;
    }
    value = document.getElementById("time-input").value;
    if (value == "") {
        return 5;
    }
    return parseFloat(value);
}


function updateInvalidness() {
    input = document.getElementById("time-input");
    if (!isTimeValid()) {
        input.classList = "invalid";
    } else {
        input.classList = "";
    }
}

function changeSeconds(diff) {
    value = document.getElementById("time-input").value;
    if (!isNaN(value)) {
        if (value == "") {
            value = 5;
        }
        value = parseFloat(value);
        if ((value + diff) >= 1 || diff > 0) {
            input.value = value + diff;
            updateInvalidness();
            timeChanged();
        }
    }
}

function timeChanged() {
    if (isTimeValid()) {
        if (beeperBegun) {
            timeChangedWhileBegun = true;
            return;
        }
        time = getTime();
        sec = Math.floor(time);
        millis = Math.floor((time - sec) * 100) / 100;
        millis = Intl.NumberFormat("en-US", { minimumFractionDigits: 2 }).format(millis);
        millis = ("" + millis).slice(2);

        seconds = document.getElementById("seconds").innerText = sec;
        milliseconds = document.getElementById("milliseconds").innerText = millis;

        beepInterval = getTime();
        beepTimeCounter = beepInterval;
    }
}

function toggle() {
    var button = document.getElementById("begin");
    if (!beeperBegun && !isTimeValid()) {
        return;
    }
    beeperBegun = !beeperBegun;
    if (beeperBegun) {
        button.innerText = "Stop!";
        lastTimestampMs = Date.now();
        intervalId = setInterval(update, 10);
    } else {
        button.innerText = "Begin!";
        clearInterval(intervalId);
        if (timeChangedWhileBegun) {
            timeChangedWhileBegun = false;
            timeChanged();
        }
        lastSec = -1;
        showBeep = 0;
        document.title = "Beeper!";

        document.getElementById("audio").pause()
    }
}

function update() {
    var seconds = document.getElementById("seconds");
    var milliseconds = document.getElementById("milliseconds");

    var currentTimestampMs = Date.now();
    var delta = currentTimestampMs - lastTimestampMs;
    lastTimestampMs = currentTimestampMs;

    beepTimeCounter -= (delta / 1000);
    showBeep -= (delta / 1000);
    if (beepTimeCounter <= 0) {
        console.log(beepTimeCounter);
        beepTimeCounter = beepInterval;
        showBeep = 0.5;
        document.getElementById("audio").fastSeek(0)
        document.getElementById("audio").play()
    }
    var sec = Math.floor(beepTimeCounter);
    seconds.innerText = sec;
    var millis = Math.floor((beepTimeCounter - sec) * 100) / 100;
    millis = Intl.NumberFormat("en-US", { minimumFractionDigits: 2 }).format(millis);
    millis = ("" + millis).slice(2);
    milliseconds.innerText = millis;

    if (lastSec != sec) {
        lastSec = sec;
        if (showBeep > 0) {
            document.title = "Beeeep!";
        } else {
            document.title = "Beeper | " + sec;
        }
    }
}