Question

我正在尝试创建一个歌曲选择列表，用户可以点击按钮预览歌曲。我正在努力解决设置按钮innerHTML的逻辑，当按钮歌曲正在播放时读取“停止预览”，并且当用户点击另一个按钮时，按钮HTML也会改变。

目前我的脚本看起来像：

 var playedBy;
var song;
var playing = false;
var audioPlayer = document.getElementById("demo");

function setSong(value, idForPlayed) {
    song = value;
    audioPlayer.src = song;
    audioPlayer.play();
    playedBy = idForPlayed;
    var currentIdPlayingValue = document.getElementById(idForPlayed).value;
    console.log(currentIdPlayingValue);
}


function valueGetter(button) {
    song = button.value;
    button.className += " playing";
    var idForPlayed = button.id;
    var value = song;
    setSong(value, idForPlayed);

}

function doEnd() {
    playing = false;
    console.log('we have an end');
    document.getElementById('demo').pause();
    document.getElementById('demo').currentTime = 0;
}

按钮的值是我正在传递音频对象的URL。

这里有任何帮助，对我应采取的方法非常不确定。

全部谢谢！

代码笔中的简单示例：http://codepen.io/anon/pen/XXwXYV

Answer 1

您可以在点击时切换innerHtml和所有其他按钮html。

像

这样的东西

$('.btn').on('click', function(){
  //Add or remove a class for the clicked button to determine if it's playing.
  $(this).toggleClass('playing');

  if($(this).hasClass('playing')){
    //Set all buttons back to play
    //And probably call some sort of Stop Playing function
    $('.btn').html('Play').removeClass('playing');

    $(this).html('Stop Playing').addClass('playing');
  }else{
    $('.btn').html('Play').removeClass('playing');
  }
});

Javascript / jQuery检查哪个按钮当前正在播放歌曲

1 个答案: