javascript - 如何在面向对象的HTML5 JS音频播放器中显示可点击的播放列表？

Question

我有一个使用HTML5和Javascript(带有一些基本CSS)构建的可操作音频播放器，但是我想添加一个可单击的播放列表，因此将显示正在播放的音轨的名称，并可以单击歌曲并立即开始播放。

这是我的JS:

function Jukebox() {
  this.playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3', 'song4.mp3']
  this.currentIndex = 0
  this.audio = $('#audioPlayer')[0]
  this.audio.src = this.playlist[this.currentIndex]

  // console.log(this.audio)

  this.play = function(){
      this.audio.play();
      // console.log(this.currentIndex)
  }

  this.pause = function(){
      this.audio.pause();
  }

  this.stop = function(){
      this.audio.pause();
      this.audio.currentTime = 0;
  }

  this.next = function(){
      this.audio.pause();
      this.currentIndex++;
      if(this.currentIndex == this.playlist.length){
        this.currentIndex = 0
      };
      this.audio.src = this.playlist[this.currentIndex];
      this.play();
  }

  this.prev = function(){
      this.audio.pause();
      this.currentIndex--;
      if(this.currentIndex <= 0){
        this.currentIndex = this.playlist.length - 1
      };
      this.audio.src = this.playlist[this.currentIndex];
      this.play();
  }

}

var thisIsMyJukebox = new Jukebox()


//pass the play function by reference
$('#playBtn').click(function(){
  thisIsMyJukebox.play()
})
$('#pauseBtn').click(function(){
  thisIsMyJukebox.pause()
})
$('#stopBtn').click(function(){
  thisIsMyJukebox.stop()
})
$('#prevBtn').click(function(){
  thisIsMyJukebox.prev()
})
$('#nextBtn').click(function(){
  thisIsMyJukebox.next()
})

});

音频文件位于我的硬盘驱动器上，并且歌曲具有我可以写的专有名称，它们在代码文件夹中只是用这种方式命名，因为它更短。

谢谢你的帮助。

Answer 1

如果您想使用Bootstrap，则只需将所有歌曲添加为按钮列表即可。 ta田