修改Audio.currentTime触发幽灵二次点击，导致音频播放异常

核心现象 #

暂停Audio实例并设置其currentTime属性后，控制播放/暂停的按钮会被自动触发二次点击，导致音频无法正常播放。再次设置currentTime后该现象暂时消失，但每次设置currentTime时问题会反复出现。

简化复现代码 #

放慢音频播放速率是为了方便操作：

<!doctype html>
<html>
<body>
  <button id="play" disabled>play</button>
  <button id="idk">load audio</button>
  <script>
    var clicks = 0; console.clear();
    idk = document.getElementById("idk");
    idk.addEventListener("click", async ()=>{
      aud = new Audio("https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3")
      aud.addEventListener('canplaythrough', init);
    }, {once: true});
    function init(){
      aud.playbackRate = 0.25; // 延长音频时长便于操作
      playButton = document.getElementById("play");
      playButton.disabled = false;
      idk.innerText = "pause and set time to 1";
      playButton.addEventListener("click", e=>{
        if(aud.paused){
          aud.play();
          playButton.innerText = "pause";
        }else{
          aud.pause();
          playButton.innerText = "play";
        }
        console.log(clicks++, aud.paused);
      });
      idk.addEventListener("click", e=>{
        console.log("Rightmost element clicked");
        if(!aud.paused){ aud.pause(); playButton.innerText = "play"; }
        aud.currentTime = 1;
      });
    }
  </script>
</body>
</html>

操作步骤 #

• 点击load audio按钮，等待音频加载完成
• 点击play按钮开始播放音频
• 点击pause and set time to 1按钮
• 后续每次点击播放/暂停按钮，click事件会触发两次，音频无法正常播放；再次点击pause and set time to 1问题暂时消失，但重复操作会再次出现

进阶复现（触发四次点击） #

<!doctype html>
<html>
<body>
  <button id="play">play</button>
  Control+Click to pause the audio and change it's currentTime value
  <script>
    var clicks = 0; console.clear();    
    playButton = document.getElementById("play");
    playButton.addEventListener("click", async ()=>{
      window.aud = new Audio("https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3");
      aud.addEventListener('canplaythrough', ()=>{
        playButton.style.color = "#080";
        aud.playbackRate = 0.25; // 延长音频时长便于操作
        playButton.addEventListener("click", e=>{
          if(e.ctrlKey){
            if(!aud.paused){ aud.pause(); playButton.innerText = "play"; }
            aud.currentTime = 1;
            return;
          }
          if(aud.paused){
            aud.play();
            playButton.innerText = "pause";
          }else{
            aud.pause();
            playButton.innerText = "play";
          }
          console.log(clicks++, aud.paused);
        });
      });
    }, {once: true});
  </script>
</body>
</html>

操作方式 #

按住CTRL并点击播放/暂停按钮，会触发四次click事件，同样导致播放异常。

额外观察结果 #

• 直接在控制台执行aud.play()可以正常播放音频，但播放/暂停按钮仍会触发重复点击
• 连续设置aud.currentTime偶数次后，控制台直接修改该值不再生效，必须点击对应按钮才能触发变更

环境兼容性 #

• 问题出现的环境：ChromeOS（Chrome Beta 127.0.6533.94）、Android 14（Chrome 127.0.6533.85）、Firefox 129.0、非欧盟区iOS设备（完全无法正常运行）
• 无问题的环境：MacOS Sonoma（Safari 17.3）

需求说明 #

以上是大型代码库中问题的简化复现，部分修改方案可能不适用于现有场景。希望了解问题的本质及触发原因，若提供修复方案，需尽量减少对现有代码的改动。

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