javascript - 如何使用Vanilla JavaScript自动播放下一首歌

标签 javascript audio addeventlistener

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

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

谢谢 !

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>

最佳答案

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

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>

关于javascript - 如何使用Vanilla JavaScript自动播放下一首歌,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58679447/

相关文章:

javascript - 使用 jquery 从 bootstrap selectpicker 文本框中获取值

JavaScript 播放音频一个又一个 HTML5

javascript - XMLHttpRequest 上传属性到底有什么好处?

javascript - 旋转一个简单的立方体两次

javascript - 是否可以以可从多个 URI 请求的方式缓存 HTML 页面?

javascript - 如何使用 get/set 获取属性以使用 JSON.stringify() 进行序列化

javascript - 间隔(或超时)内的jquery .animate在清除后继续进行

java - 操纵耳机插孔输出

javascript - setTimeout的语法是什么?

javascript - 使用对象方法作为事件监听器