HTML5音频进度条在Safari/Orion中跳动，在Chrome/Firefox中流畅

最近遇到个挺闹心的小问题：在Safari和Orion浏览器里，音频刚播放大概半秒左右，进度条会突然“抽搐”一下——短暂往起点方向跳回去一点，然后才继续正常前进，但音频本身的播放完全没受影响，换成Chrome或者Firefox测试就完全流畅，没这个毛病。

我把问题简化成了最小复现的代码，方便排查：

<head>
    <title>Audio Progress Twitch Test</title>
    <style>
        /* Basic body for display */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding: 2rem;
            font-family: sans-serif;
        }
        audio {
            width: 100%;
            max-width: 600px;
        }
        progress {
            width: 100%;
            max-width: 600px;
            height: 1rem;
        }
    </style>
</head>
<body>
    <audio controls id="audioPlayer">
        <source src="your-audio-file.mp3" type="audio/mpeg">
        你的浏览器不支持音频播放
    </audio>
    <progress id="progressBar" value="0" max="100"></progress>

    <script>
        const audio = document.getElementById('audioPlayer');
        const progressBar = document.getElementById('progressBar');

        audio.addEventListener('timeupdate', () => {
            const progress = (audio.currentTime / audio.duration) * 100;
            progressBar.value = progress;
        });
    </script>
</body>

针对这个问题，我摸索出几个可行的解决思路，你可以试试：

• 等元数据加载完成再初始化进度条：Safari和Orion在音频刚启动时，可能还没完全解析出准确的duration，导致初期的currentTime计算出现偏差。可以监听loadedmetadata事件，等元数据加载完成后再开启进度条的更新逻辑：

  audio.addEventListener('loadedmetadata', () => {
      audio.addEventListener('timeupdate', updateProgress);
  });
  
  function updateProgress() {
      if (!isNaN(audio.duration)) {
          const progress = (audio.currentTime / audio.duration) * 100;
          progressBar.value = progress;
      }
  }
  

• 给进度条加个“防跳”逻辑：Safari初期的timeupdate可能会返回一个异常偏小的currentTime值，我们可以记录上一次的进度值，如果新值比上一次小太多（比如超过1%，可根据实际调整阈值），就忽略这次更新：

  let lastProgress = 0;
  
  function updateProgress() {
      if (isNaN(audio.duration)) return;
      const currentProgress = (audio.currentTime / audio.duration) * 100;
      // 如果当前进度比上一次小超过1%，就跳过这次更新
      if (currentProgress < lastProgress - 1) {
          return;
      }
      progressBar.value = currentProgress;
      lastProgress = currentProgress;
  }
  

• 检查音频文件编码：有些VBR（可变比特率）的MP3文件在Safari里解析时，初期的时间戳可能会有误差，换成CBR（恒定比特率）的MP3或者AAC格式的音频文件，可能就能解决这个问题。

内容来源于stack exchange