javascript - 上一首歌曲播放完毕后自动播放下一首

Question

我想创建一个音频背景播放器，用户只能点击图像播放或停止播放。我在创建或重新编写现有代码来为它制作播放列表时遇到问题，当上一首歌曲播放完毕时会自动播放下一首歌曲。我想用 Vanilla js 来做。
这是我目前所拥有的:
https://jsfiddle.net/rockarou/ad8Lkkrj/

var imageTracker = 'playImage';

swapImage = function() {
  var image = document.getElementById('swapImage');
  if (imageTracker == 'playImage') {
    image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_pause_01.png';
    imageTracker = 'stopImage';
  } else {
    image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_play_01.png';
    imageTracker = 'playImage';
  }
};

var musicTracker = 'noMusic';

audioStatus = function() {
  var music = document.getElementById('natureSounds');
  if (musicTracker == 'noMusic') {
    music.play();
    musicTracker = 'playMusic';
  } else {
    music.pause();
    musicTracker = 'noMusic';
  }
};

Answer 1

这里是触发下一首歌曲的技巧:

music.addEventListener('ended',function(){
      //play next song
    });

如何在同一音频标签上播放另一首歌曲:

 music.pause();
 music.src = "new url";
 music.load();
 music.play();

现在这是一个很酷的 html5 播放列表示例，您可以同时加载每首歌曲，以防某些客户端(移动设备)在您消耗流量时不高兴，在下一个示例中，所有音频都同时加载从一首歌到另一首歌的平稳过渡， 加载歌曲:

//playing flag 
var musicTracker = 'noMusic';
//playlist audios
var audios = [];
 $(".song").each(function(){
        var load = new  Audio($(this).attr("url"));
    load.load();
    load.addEventListener('ended',function(){
       forward();
    });
    audios.push(load);
 });
//active track
var activeTrack = 0;

正在播放突出显示的女巫歌曲，带有一点jquery，是的，是的，是的，我很懒，很懒:

var showPlaying = function()
{
    var src = audios[activeTrack].src;
   $(".song").removeClass("playing");
   $("div[url='" + src + "']").addClass("playing");
};

Fiddle here

注意:如果没有播放声音，请手动检查音频 url 是否可访问