jQuery-音频无法启动

Question

我正面临一个问题，我不知道出了什么问题。 我有一个测试站点，那里有一个音乐播放器。如果单击不同的div，它将自动开始播放相应的音频文件（源中存储在对象中的路径，但这些路径在其他JS文件中）。 现在有几个星期，当我尝试启动播放器时，我必须在div上单击两次以使其正常工作。

（Test link）

这是该网站的代码：

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()

您有什么建议要解决吗？

谢谢！