Question

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

output = {}
for q in wd:
    for r in fs:
        if q in r:
            output[q] = [item for item in r if item != q]
            break
        else:
            output[q] = []

print(output)

我的目标是使用Javascript遍历它们（播放每首歌曲）。我一直遇到的问题是所有歌曲都同时播放，而不是像我希望的那样，每个曲目都一个接一个地播放。我怎样才能解决这个问题？

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

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

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

如何在歌曲列表中循环播放而没有所有歌曲同时播放（JavaScript）？

1 个答案: