HTML5自定义音频控件问题：paused属性始终为true，无法实现一键播放/暂停

我刚踩过类似的坑，这俩问题其实根源都是没复用同一个Audio实例，咱们一步步捋清楚：

问题核心分析 #

1. paused属性始终为true：你大概率是每次点击按钮都重新创建了Audio对象（比如new Audio(...)），这就导致每次点击都是全新的音频实例——之前播放的那个实例已经“失联”了，你检查的paused状态是新对象的，自然一直是true，根本没触及到正在播放的音频。
2. 用data-song时暂停失效：同理，每次点击都从data-song取路径新建Audio实例，会直接丢失之前的播放实例，暂停操作根本作用不到正在播放的音频上。

解决方案：复用Audio实例 #

核心思路是：第一次点击时创建Audio实例并绑定到按钮元素上，后续点击直接复用这个实例，这样就能正确获取和修改它的播放状态了。

完整代码示例 #

HTML结构

<!-- 多个带data-song的音频控件按钮 -->
<button class="audio-btn" data-song="track-1.mp3">播放</button>
<button class="audio-btn" data-song="track-2.mp3">播放</button>
<button class="audio-btn" data-song="track-3.mp3">播放</button>

JavaScript逻辑

// 给所有音频按钮绑定点击事件
document.querySelectorAll('.audio-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 先检查当前按钮是否已经关联了Audio实例
    let audio = this.audioInstance;

    if (!audio) {
      // 第一次点击：创建实例并绑定到按钮上
      const songUrl = this.dataset.song;
      audio = new Audio(songUrl);
      this.audioInstance = audio;

      // 可选：监听音频结束事件，恢复按钮文本
      audio.addEventListener('ended', () => {
        this.textContent = '播放';
      });
    }

    // 根据当前状态切换播放/暂停
    if (audio.paused) {
      audio.play().catch(err => {
        console.error('播放失败:', err);
      });
      this.textContent = '暂停';
    } else {
      audio.pause();
      this.textContent = '播放';
    }
  });
});

关键细节说明 #

• 实例绑定：把Audio实例存在按钮的audioInstance属性上，确保每个按钮对应自己的音频实例，多个音轨之间不会互相干扰。
• 状态判断：复用实例后，audio.paused就能正确反映当前音频的播放状态，切换逻辑自然正常工作。
• 错误处理：给play()加上catch，避免浏览器自动播放策略导致的报错（比如用户未交互页面时无法自动播放）。

这样修改后，不管是单个还是多个音轨，播放/暂停功能都能正常工作啦～

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