Widget:Audioplayer

<script> // 存储当前正在播放的音频实例（全局唯一，避免重复播放） let currentAudio = null;

document.addEventListener('click', function(e) {

   // 找到点击对应的音频播放器元素
   const audioPlayer = e.target.closest('.audio-player');
   if (!audioPlayer) return; // 不是播放器，直接返回

   const audioSrc = audioPlayer.getAttribute('data-src');
   if (!audioSrc) { // 缺少音频地址，提示并返回
       console.error('播放失败：音频地址不存在（data-src 属性为空）');
       alert('音频地址无效，无法播放~');
       return;
   }

   // 逻辑：如果当前有播放中的音频
   if (currentAudio) {
       // 1. 若点击的是同一个播放器：切换 播放/暂停
       if (currentAudio.src === audioSrc) {
           if (currentAudio.paused) {
               currentAudio.play().catch(handlePlayError);
           } else {
               currentAudio.pause();
           }
       } else {
           // 2. 若点击的是不同播放器：暂停当前音频，播放新音频
           currentAudio.pause();
           currentAudio = new Audio(audioSrc);
           currentAudio.play().catch(handlePlayError);
       }
   } else {
       // 无正在播放的音频：创建新实例并播放
       currentAudio = new Audio(audioSrc);
       currentAudio.play().catch(handlePlayError);
   }

   // 播放失败的统一处理函数
   function handlePlayError(error) {
       console.error('播放失败:', error);
       // 给用户更友好的提示（根据错误类型区分）
       const errorMsg = error.name === 'NotAllowedError' 
           ? '浏览器禁止自动播放，请先与页面交互后再尝试~' 
           : '音频播放失败，请检查地址是否有效或网络状态';
       alert(errorMsg);
       currentAudio = null; // 重置当前音频实例
   }

}); </script>