Question

我一直访问此网站以搜索解决方案，但我无法找到问题的答案。

我想在页面中添加多个音频文件。所以我使用了以下编码。这样做是当你点击一个文件，它开始播放音乐，当你点击下一个文件时，其余文件将暂停。这就是我想要的。

但我也希望每个文件都有播放/暂停选项;所以当你点击＆＃34;听/暂停＆＃34;链接为＆＃34;夜间游泳＆＃34;，它开始播放，当您再次点击相同的链接时，它将停止。

我有什么方法可以做到这一点？我用Javascript不是很方便，我尝试了各种其他代码，但似乎没有任何工作方式。

我希望有人可以帮助我，我希望我的问题得到正确解释（我是荷兰语，我为我的英语道歉：S）

这是我的代码：

<audio id="1"> 
<source src="everynight-snippet.mp3" type='audio/mpeg'>
</audio>
<audio id="2"> 
<source src="nightswim-snippet.mp3" type='audio/mpeg'>
</audio>

Every Night (<a href="#" onclick="aud_play_pause('1')">Listen/Pause</a>)
Night Swim (<a href="#" onclick="aud_play_pause('2')">Listen/Pause</a>)

脚本：

<script>
ids = new Array(2); // an array with total number of ids
function aud_play_pause(idNumber) {
var idNumber = document.getElementById(idNumber);

for(var i=0; i<ids.length; i++){
document.getElementById(i+1).pause(); // Pause all ids before playing next file.
document.getElementById(i+1).currentTime = 0; // Set the time back to zero, else it will replay from the pause point.
}

idNumber.play();
}
</script>

总结一下：

如果我点击第一首歌曲（Every Night），它就会开始播放。当我再次点击它时，它应该停止播放。
如果我在第一首歌曲播放时点击第二首歌曲（Night Swim），第一首歌曲应该停止播放，第二首歌曲应该开始播放。如果我再次点击第二首歌曲，它应该停止。
等

Answer 1

您可以使用 currentTime 属性检查 idNumber 音频是否正在播放，如果不是，则启动它。否则，如果当前正在播放，则无论如何都可以停止所有这些。

ids = new Array(2); // an array with total number of ids
function aud_play_pause(idNumber) {
  var clickedAudio = document.getElementById(idNumber);

  for (var i = 0; i < ids.length; i++) {
    if ((i + 1) == idNumber && clickedAudio.currentTime == 0) { // if it's the current one and is not playing
      clickedAudio.play(); // start it
    } else { // either not the current one, or the current one but it is playing
      document.getElementById(i + 1).pause(); // Pause all ids before playing next file.
      document.getElementById(i + 1).currentTime = 0; // Set the time back to zero, else it will replay from the pause point.
    }

  }

}

您通过编写代码的方式暂停了所有元素。

HTML：多个onclick音频文件，使最后一个停止

1 个答案: