javascript - 如何循环播放歌曲列表而不同时播放所有歌曲 (JavaScript)？

Question

我的 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>

我的目标是使用 Javascript 循环播放它们(播放每首歌曲)。我一直遇到的问题是所有歌曲都是同时播放的，而不是每首歌曲都单独播放，一个接一个，就像我想要的那样。我怎样才能解决这个问题？

这是我之前尝试过的 JS 代码，但正如我提到的，列表中的所有歌曲都会同时播放，这是我不想要的:

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

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

Answer 1

您无需计算出所有歌曲的长度并设置计时器或其他任何内容。只需使用 ended event 。

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