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

如果您想使用Boostrap，您只需将所有歌曲添加为按钮列表即可。 http://getbootstrap.com/components/#list-group-buttons

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

1 个答案: