Elementor中点击其他按钮时如何停止当前播放的按钮音频

现有代码为每个按钮单独创建了独立Audio实例，点击新按钮时未对其他正在播放的音频做暂停处理，多个独立音频实例同时运行就会出现叠音问题。

核心逻辑：新增全局变量存储当前正在播放的音频对象，每次触发任意按钮的播放事件时，先暂停正在播放的音频、重置其播放进度，再启动当前按钮绑定的音频，从根源避免多音频同时播放。
将原有代码替换为以下代码，放入Elementor自定义HTML组件或主题自定义JS栏即可生效：

<script>
// 兼容WordPress环境jQuery别名冲突
jQuery(document).ready(function($) {
  // 全局标记当前正在播放的音频实例
  let activeAudio = null;

  // 统一绑定所有音效按钮事件，所有音效按钮需统一添加class: sound-effect-btn
  // 每个按钮的音效地址存到按钮的data-sound自定义属性上，无需为每个按钮重复写绑定逻辑
  $(document).on('mousedown', '.sound-effect-btn', function() {
    // 停止当前正在播放的音频
    if (activeAudio) {
      activeAudio.pause();
      activeAudio.currentTime = 0;
    }

    // 初始化并播放当前按钮绑定的音效
    const targetAudio = new Audio($(this).data('sound'));
    targetAudio.load();
    targetAudio.play();

    // 更新全局正在播放的音频标记
    activeAudio = targetAudio;
  });
});
</script>

• 编辑所有需要添加音效的按钮，在Elementor右侧栏「高级」-「CSS类」处统一填入sound-effect-btn
• 同个「高级」选项卡下找到「自定义属性」，添加属性data-sound，属性值填写对应音效文件的直链地址
• 代码采用事件委托写法，兼容Elementor弹窗、异步加载的动态内容，无需额外调整

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