点击按钮播放随机音频时如何停止当前播放音频避免重叠

核心实现逻辑：每次点击按钮触发播放前，先暂停所有正在播放的音频、重置播放进度，再播放新随机选中的音频即可解决重叠问题。

修改后的完整jQuery代码如下：

$( document ).ready(function() {
  function playSound(){
    // 新增代码：停止所有正在播放的音频
    $("audio").each(function() {
      this.pause();
      this.currentTime = 0;
    });

    var pattern = [],
      tone;
    pattern.push(Math.floor(Math.random() * 4));
    tone = "#sound" + pattern[0];
    $(tone)[0].play();
  }

  $("#button").click(playSound);
});

修改说明 #

• 新增的$("audio").each()遍历逻辑会匹配页面所有audio元素，不管后续新增多少个音频标签都能自动适配，不需要手动修改选择器
• 每个音频执行两个操作：调用pause()方法暂停播放，将currentTime属性设为0把播放进度重置到起始位置，下次播放时会从头加载播放

内容的提问来源于stack exchange，提问作者lucidigi