如何创建HTML5播放列表循环功能

<div id="playlist"></div>
<audio id="player" controls></audio>

var playlist = [
  {
    title: "Song 1",
    source: "song1.mp3"
  },
  {
    title: "Song 2",
    source: "song2.mp3"
  },
  {
    title: "Song 3",
    source: "song3.mp3"
  }
];

var playlistContainer = document.getElementById("playlist");
var player = document.getElementById("player");

for (var i = 0; i < playlist.length; i++) {
  var listItem = document.createElement("div");
  listItem.innerHTML = playlist[i].title;
  listItem.addEventListener("click", function() {
    player.src = playlist[i].source;
    player.play();
  });
  playlistContainer.appendChild(listItem);
}

player.addEventListener("ended", function() {
  var currentIndex = playlist.findIndex(function(item) {
    return item.source === player.src;
  });
  var nextIndex = (currentIndex + 1) % playlist.length;
  player.src = playlist[nextIndex].source;
  player.play();
});