Javascript 使用for循环连续播放音频文件

我有以下HTML代码：

<div id="1">Paragraph 1</div>
<div id="2">Paragraph 2</div>
<div id="3">Paragraph 3</div>
<div id="4">Paragraph 4</div>
<div id="5">Paragraph 5</div>

<span id="play">play</span>

我想做的是，当我点击播放时，第1段的音频播放，播放时，突出显示这个div，然后在后台加载下一段音频，这样音频就不会停止加载，而是无缝地过渡到下一段。现在，当播放完第一段的音频后，取消高亮显示该div，然后播放下一段的音频并高亮显示，然后重复该过程，直到循环完成

我认为通过获取音频文件的持续时间并在for循环中播放所有音频，这将很容易做到。但这不起作用：

$('#play').on("click",function(){

    var total_paragraphs = 7;

    function playAudio() {

        for (var i = 1; i <= total_paragraphs; i++) {

            var audio = new Audio("paragraphs/"+i+".mp3");

            var sec, ms;

            audio.addEventListener("loadedmetadata", function(_event) {
                seconds = audio.duration.toFixed(2),
                milliseconds = audio.duration.toFixed(2)*1000;
            });

            $("#"+i).css("background-color", "red");

            audio.play();

            audio.onended = function() {
                $("#"+i).css("background-color", "white");
            };

        }

    }

    playAudio();

});

当我点击播放时，所有音频都同时播放。似乎所有的循环都是同时执行的。我想用音频文件的持续时间来延迟循环，但这也不行

我相信有很多更简单的方法来做我想做的事。任何帮助都将不胜感激

那么：

html

jquery

_play = (totalParagraphs, currentParagraph) =>
{
    const paragraph = $(`.paragraph:nth-child(${currentParagraph})`)

    if (currentParagraph <= totalParagraphs)
    {
        paragraph.css('background', 'coral');
        const audio = new Audio(`paragraphs/${currentParagraph}.mp3`)
        audio.play()
        audio.onended = () => {
            paragraph.css('background', 'white')
            _play(totalParagraphs, currentParagraph + 1)
        }
    }
}

$('#play').on('click', () => {

    let totalParagraphs  = $('.paragraph').length,
        currentParagraph = 1

    _play(totalParagraphs, currentParagraph)

})

---

audio.oned回调中的i始终为8。类似地，loadedmetadata回调中的音频将始终是new AudioParagents/7。mp3@PatrickRoberts那么，有什么解决方案吗？这实际上几乎是完美的，除了像我说的，过渡不是无缝的，因为它必须在前一个音频完成后才加载新的音频。我想要的是过渡应该是无缝的，也就是说，它们不应该看起来像是不同的音频。我认为如果在后台加载下一个音频，这是可以实现的。有什么想法吗？事实上，我现在很满意。不过，你能帮我设置一个暂停功能吗？因为这只是一个游戏功能。

_play = (totalParagraphs, currentParagraph) =>
{
    const paragraph = $(`.paragraph:nth-child(${currentParagraph})`)

    if (currentParagraph <= totalParagraphs)
    {
        paragraph.css('background', 'coral');
        const audio = new Audio(`paragraphs/${currentParagraph}.mp3`)
        audio.play()
        audio.onended = () => {
            paragraph.css('background', 'white')
            _play(totalParagraphs, currentParagraph + 1)
        }
    }
}

$('#play').on('click', () => {

    let totalParagraphs  = $('.paragraph').length,
        currentParagraph = 1

    _play(totalParagraphs, currentParagraph)

})