停止所有其他<audio> onclick？ （还有一些FontAwesome的东西）

Question

长期潜伏者，第一次提问;感谢迄今为止所有的帮助！

我想要什么： 用户点击其中一个三十按钮并听到相应的音轨。单击另一个按钮可播放另一个曲目，并停止任何已播放的曲目。超级简单。

会发生什么： 一切都是错误的。

我也改变了播放/暂停FontAwesome课程（这也没有用）但我稍后会想出那个：

<audio id="song1"><source src="sample/1.mp3" type="audio/mpeg"></audio>
<audio id="song2"><source src="sample/2.mp3" type="audio/mpeg"></audio>
<audio id="song3"><source src="sample/3.mp3" type="audio/mpeg"></audio>

<button onclick="letsBoogie(song1);"><i class="fa fa-play-circle"></i></button>
<button onclick="letsBoogie(song2);"><i class="fa fa-play-circle"></i></button>
<button onclick="letsBoogie(song3);"><i class="fa fa-play-circle"></i></button>

<script>
var setList = document.getElementsByTagName('audio');

function letsBoogie(sample);
for(var i = 0, len = setList.length; i < len;i++){
    if(setList[i] != sample.target){
        setList[i].pause();
        setList[i].currentTime = 0;
        $(this).find('i').className = "fa fa-play-circle";
    } else {
    setList[i].play();
    $(this).find('i').className = "fa fa-pause-circle-o";
    }
}
}, true);
</script>

我已经把头发撕了好几天了。任何帮助都会超级赞赏。

编辑：对于任何偶然发现此问题的人来说，这是最终的工作代码。首先，识别所有音频：

<!-- this can be anywhere in body -->
<audio id="song1"><source src="sample/1.mp3" type="audio/mpeg"></audio>
<audio id="song2"><source src="sample/2.mp3" type="audio/mpeg"></audio>
<audio id="song3"><source src="sample/3.mp3" type="audio/mpeg"></audio>
...

然后放置您的图标（或按钮或链接或其他）：

<i class="fa fa-play-circle" onclick="letsBoogie(song1,this)"></i>
<i class="fa fa-play-circle" onclick="letsBoogie(song2,this)"></i>
<i class="fa fa-play-circle" onclick="letsBoogie(song3,this)"></i>
...

最后，在你的JS中推动这种美：

var setList = $('audio');
function letsBoogie(tune, that) {
  if (tune.paused) {
  $.each(setList, function(index, alltunes) { // pause and reset all audio
    alltunes.pause();
    alltunes.currentTime = 0;
  });
    tune.play(); // then toggle play/pause targeted audio
  } else {
    tune.pause();
}
  tune.onplaying = function() { // change icon if playing
  $(that).attr('class', 'fa fa-pause-circle-o');
  }
  tune.onpause = function() { // change icon and reset if paused
  $(that).attr('class', 'fa fa-play-circle');
  sample.currentTime = 0;
  }
  tune.onended = function() { // change icon when finished
  $(that).attr('class', 'fa fa-play-circle');
  };
}

Answer 1

  

您需要.attr('class',设置课程而不是className，因为它是DOM api的方法。

试试这个：

var setList = $('audio');

function letsBoogie(sample, that) {
  $.each(setList, function(index, elem) {
    elem.pause();
    elem.currentTime = 0;
  });
  $('button i').attr('class', 'fa fa-play-circle');
  sample.play();
  $(that).find('i').attr('class', 'fa fa-pause-circle');
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<audio id="song1">
  <source src="sample/1.mp3" type="audio/mpeg">
    <source src="sample/1.ogg" type="audio/ogg">
</audio>
<audio id="song2">
  <source src="sample/2.mp3" type="audio/mpeg">
    <source src="sample/2.ogg" type="audio/ogg">
</audio>
<audio id="song3">
  <source src="sample/3.mp3" type="audio/mpeg">
    <source src="sample/3.ogg" type="audio/ogg">
</audio>

<ul>
  <li>Song 1</li>
  <li>
    <button onclick="letsBoogie(song1,this);"><i class="fa fa-play-circle"></i>
    </button>
  </li>
</ul>
<ul>
  <li>Song 2</li>
  <li>
    <button onclick="letsBoogie(song2,this);"><i class="fa fa-play-circle"></i>
    </button>
  </li>
</ul>
<ul>
  <li>Song 3</li>
  <li>
    <button onclick="letsBoogie(song3,this);"><i class="fa fa-play-circle"></i>
    </button>
  </li>
</ul>

编辑：我建议您不要将id属性值作为参数传递（不带引号（"）），因为JavaScript会查找具有上述参数名称的全局变量。如果您有任何其他具有相同名称的全局变量，那么您的代码将无法按预期工作。我还建议使用JavaScript事件绑定而不是inline事件绑定。