咨询：如何实现图片按钮在音频播放时禁用、播放结束后恢复可用

当然可以用非常简单的代码实现这个需求啦！咱们只需要在你原有的代码基础上做几处小改动就能搞定，我给你调整后的完整代码，再拆解下关键逻辑：

<head>
  <style>
    audio { display:none;}
    img {
      width: 25px;
      content:url(mybutton.png);
    }
    img:hover {
      cursor: pointer;
    }
    /* 新增禁用状态的样式，给用户直观的视觉反馈 */
    img.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  </style>

  <script>
    function playSound(mysound) {
      // 先获取到按钮元素，给图片加了个id方便定位
      const soundBtn = document.getElementById('soundBtn');
      
      // 第一步：禁用按钮
      soundBtn.onclick = null; // 移除点击事件，确保点击不会触发函数
      soundBtn.classList.add('disabled'); // 添加禁用样式，让用户一眼看出来不能点了

      let theSound = new Audio(mysound);
      theSound.play();

      // 第二步：监听音频播放结束的事件，恢复按钮
      theSound.addEventListener('ended', () => {
        soundBtn.onclick = () => playSound('ch.m4a'); // 恢复点击事件
        soundBtn.classList.remove('disabled'); // 移除禁用样式
      });
    }
  </script>
</head>

<body>
  <!-- 给图片添加id，方便JS获取 -->
  <img id="soundBtn" onclick="playSound('ch.m4a')" />
</body>

关键改动说明： #

• 给图片按钮加了id="soundBtn"，这样我们能轻松在JavaScript里定位到这个元素
• 新增了.disabled的CSS样式，用来给禁用状态的按钮做视觉提示（透明度降低、鼠标变成禁止样式）
• 在playSound函数开头，先移除按钮的点击事件并添加禁用样式，彻底让按钮“不可用”
• 给音频对象绑定了ended事件监听——当音频播放完成时，这个事件会自动触发，我们在事件处理函数里把按钮的点击事件和样式都恢复回去，这样用户就能再次点击播放了

如果觉得加样式太麻烦，也可以简化成只修改元素的pointer-events属性：

// 禁用时
soundBtn.style.pointerEvents = 'none';
// 恢复时
soundBtn.style.pointerEvents = 'auto';

不过还是建议保留视觉样式，这样用户体验会更好哦~

备注：内容来源于stack exchange，提问作者Tom