首页 > 解决方案 > 如何使用香草 javascript 自动播放下一首歌曲

问题描述

嗨,我正在尝试在当前播放歌曲结束时自动播放下一首歌曲。

我还想知道如何确保播放列表在最后一首歌结束时从头开始。

谢谢 !

var songs = [
  "song1.mp3",
  "song2.mp3",
  "song3.mp3",
  "song4.mp3"
];

var song = new Audio();
var currentSong = 0;
var len = currentSong.length - 1;

function playSong() {
  song.src = songs[currentSong];
  song.play();
}

// play the next song when current song ends
song.addEventListener("ended", function playNextS() {
      currentSong++;
      if (currentSong == len) {
        currentSong = 0;
        playSong();
      }
<div class="player">
  <div class="songCover"><img src="" alt="" /></div>
  <div class="about">
    <div class="songTitle"></div>
    <div class="Artist"></div>
  </div>
</div>

标签: javascriptaudioaddeventlistener

解决方案


试试这个,你没有以正确的方式使用数组

var songs = [
  "song1.mp3",
  "song2.mp3",
  "song3.mp3",
  "song4.mp3"
];

var song = new Audio();
var currentSong = 0;
var len = songs.length;

function playSong(index) {
  song.src = songs[index];
  song.play();
}
song.addEventListener("ended", function playNextS() {
      currentSong++;
      if (currentSong == len) {
        currentSong = 0;
        playSong(currentSong);
      }
      else{
        playSong(currentSong);
      }
      
<div class="player">
  <div class="songCover"><img src="" alt="" /></div>
  <div class="about">
    <div class="songTitle"></div>
    <div class="Artist"></div>
  </div>
</div>


推荐阅读