JQuery - аудио не запускается

Question

У меня проблема, и я не могу понять, что пошло не так. У меня есть тестовый сайт, где есть музыкальный плеер. Если вы щелкнете по различным элементам div, он автоматически начнет воспроизведение соответствующих аудиофайлов (пути к источникам, хранящимся в объектах, но они находятся в другом файле JS). Уже несколько недель, когда я пытаюсь запустить плеер, мне нужно дважды щелкнуть по элементам div, чтобы заставить его работать.

( Тестовая ссылка )

Вот код для сайта:

let seeking = false
let current = SAMPLES;
let context = new AudioContext();
let playerVisible = false;
let jplayer = $("#player").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            title: newName(1),
            mp3: "ASSETS/MP3/" + newName(1) + ".mp3"
        })
    },
    ended: function () {
        current = current - 1
        if (current <= 0) {
            $("#playpause").html("PLAY")
            $("audio").get(0).currentTime = 0
        } else {
            playTrack(current)
        }
    }
})

function toggle() {
    if ($("audio").get(0).paused) {
        context.resume()
        $("#player").jPlayer("play")
        $("#playpause").html("PAUSE")
        $("title").text("▶ COLLECTIO HÄRTZ")
    } else {
        $("#player").jPlayer("pause")
        $("#playpause").html("PLAY")
        $("title").text("COLLECTIO HÄRTZ")
    }
}

function addZero(i) {
    return i < 10 ? "0" + i : i;
}

function timeStamp(seconds) {
    seconds = Math.floor(seconds)
    let s = seconds % 60
    let m = Math.floor(seconds / 60)
    return addZero(m) + ":" + addZero(s)
}

function addZeros(i) {
    if (i < 10)
        return "00" + i
    else if (i < 100)
        return "0" + i
    else
        return "" + i
}

function newName(i) {
    return "HAE" + addZeros(i)
}

function playTrack(i) {
    current = i
    let index = (SAMPLES - 1) - (SAMPLES - i)
    let track = newName(current)
    let title = track + " / " + TRACKS[index].artist + "<a href=\"" + TRACKS[index].dl + "\" target=\"_blank\"> \[↓\]</a>"
    $("#title").html(title)
    if (!playerVisible) {
        playerVisible = true
        $(".player").addClass("active", () => playTrack(i))
        $("#playpause").html("PAUSE")
    } else {
        $("#player").jPlayer("setMedia", {
            title: title,
            mp3: "ASSETS/MP3/" + track + ".mp3"
        })
        toggle()
        $(".current-track").removeClass("current-track")
        $("#" + track).addClass("current-track")
    }
}

function createTracks() {
    for (let i = SAMPLES; i > 0; i--) {
        $(
            "<div></div>", {
                id: newName(i),
                class: "hae",
                click: function (e) {
                    if (!$(this).hasClass("current-track")) {
                        playTrack(SAMPLES - $(this).index() + 1)
                    }
                    let w = $(window);
                    let ww = w.outerWidth();
                    if (ww < 960) {
                        $("#main").css({
                            paddingBottom: "120px"
                        })
                    } else {
                        $("#main").css({
                            paddingBottom: "0"
                        })
                    }
                },
                html: $("<img>", {
                    src: "ASSETS/ID/" + newName(i) + ".svg"
                })
            }
        ).appendTo($("#main"))
    }
}

function showMenuItem(e) {
    let id = e.currentTarget.id
    $(".active-link").removeClass("active-link")
    $("#" + id).addClass("active-link")
    $(".active-text").removeClass("active-text")
    $("#" + id + "-text").addClass("active-text")
}

function showMenu() {
    //$("#menu-btn").html($("#menu-btn").html() == "☰" ? "CLOSE" : "☰")
    $(".menu").fadeToggle(250)
}

function seek(e) {
    if (e.type === "click")
        seeking = true;
    if (seeking && (e.buttons > 0 || e.type == "click")) {
        let audio = $("audio").get(0)
        let percent = e.offsetX / $(this).width()
        audio.currentTime = percent * audio.duration
    }
}

function bindEvents() {
    $("#logo, #main").on('dragstart', (e) => false)
    $("#playpause").click(toggle)
    $("#menu-btn, #close").click(showMenu);
    $(".menu-item").click(showMenuItem)
    $(".progress").click(seek)
    $(".progress").mousemove(seek)
    $(".progress").mouseleave(() => seeking = false)
}


function main() {
    let audio = $("audio").get(0)
    let percent = (audio.currentTime / audio.duration) * 100
    $("#ct").html(timeStamp(audio.currentTime))
    $("#b").css("width", percent + "%")
    window.requestAnimationFrame(main)
}

function init() {
    bindEvents()
    createTracks()
    main()
}

init()

У вас есть предложения, чтобы это исправить?

Заранее спасибо!