如何循环浏览歌曲列表而不同时播放所有歌曲（JavaScript）？

我的HTML文档中有一个包含歌曲的音频标签列表：

<div class="pop">
                <p>Pop</p>
                <!--Pop Songs-->
                <audio src="./Pop/We Don't Talk Anymore - Charlie Puth feat. Selena Gomez.mp3"></audio>
                <audio src="./Pop/Senorita - Camila Cabello feat. Shawn Mendes.mp3"></audio>
                <audio src="./Pop/Sucker - Jonas Brother.mp3"></audio>
                <audio src="./Pop/Sunflower - Post Malone feat. Swae Lee.mp3"></audio>
                <audio src="./Pop/No Brainer - DJ Khaled feat. Justin Bieber, Quavo, Chance The Rapper.mp3"></audio>
</div>

---

你不需要计算出所有歌曲的长度，也不需要设置计时器或其他任何东西。只需使用

---

你循环播放每首歌，让他们播放，所以。。。事情就是这样。这并不奇怪。你试图得到你想要的是什么？确切的代码，但是所有的歌曲都同时播放。每首歌之间没有时间间隔，所以它们同时播放。好吧，但是你确实看到了问题所在，对吗？你让他们同时玩，所以他们就是这么做的。这就是你所尝试的？但是如果每首歌都有不同的时间长度，我该如何编辑代码以适应每首歌的时间长度而不会听起来重复？@zfrish是对的！您可以在此处检查结束事件的工作方式

const popSongs = document.querySelectorAll(".pop audio");

popSongs.forEach(song => {
    song.play();
})

// Get All Songs
const popSongs = document.querySelectorAll(".pop audio");

// For Each Song
popSongs.forEach((song, songIndex) => {

// Get the Next Song
let nextSong = popSongs[ songIndex === popSongs.length - 1 ? 0 : ++songIndex  ];

// When Current Song Ends
song.addEventListener("ended", function() {

//Play the Next Song
  nextSong.play();

  });
});

// Play first song
popSongs[0].play();