macOS Chrome下Reaplay组件音频卡顿问题排查求助

问题本质 #

在macOS Chrome环境下，麦克风被占用会压缩浏览器音频线程的资源配额，而原代码中每100ms通过setInterval触发setTrackProgress状态更新，会频繁触发React组件重渲染，抢占有限的音频线程资源，最终导致音频卡顿，且卡顿间隔与更新周期完全匹配。

具体修复方案 #

1. 优先方案：改用原生timeupdate事件替代定时器

HTMLAudioElement原生提供timeupdate事件，浏览器会根据播放状态和系统性能自动调整触发频率，比固定间隔的定时器更高效，且完全贴合实际播放进度变化。

修改组件内的进度更新逻辑，去掉定时器，改用事件监听：

// 替换原startTimer函数，用useEffect实现事件监听
useEffect(() => {
  const audio = audioRef.current;
  if (!audio) return;

  // 处理进度更新
  const handleTimeUpdate = () => {
    if (!audio.ended) {
      setTrackProgress(audio.currentTime);
    }
  };

  // 处理音频结束逻辑
  const handleEnded = () => {
    if (!isStopPlayMoreSong) {
      if (isShuffleList) {
        playRandom();
      } else {
        isRepeat ? (onScrub(0), audio.play()) : toNextTrack();
      }
    }
  };

  audio.addEventListener('timeupdate', handleTimeUpdate);
  audio.addEventListener('ended', handleEnded);

  // 组件卸载时清理监听
  return () => {
    audio.removeEventListener('timeupdate', handleTimeUpdate);
    audio.removeEventListener('ended', handleEnded);
  };
}, [isStopPlayMoreSong, isShuffleList, isRepeat]);

2. 备选方案：用requestAnimationFrame替代setInterval

如果无法修改组件核心逻辑，可将固定间隔的定时器替换为requestAnimationFrame，它会和浏览器刷新节奏同步，避免在主线程繁忙时强制触发更新：

var startTimer = function startTimer() {
  // 先清除之前的动画请求
  cancelAnimationFrame(intervalRef.current);

  const updateProgress = () => {
    if (audioRef.current.ended) {
      // 原结束逻辑保留
      if (!isStopPlayMoreSong) {
        isShuffleList ? playRandom() : (isRepeat ? (onScrub(0), audioRef.current.play()) : toNextTrack());
      }
    } else {
      setTrackProgress(audioRef.current.currentTime);
    }
    // 递归调用，保持进度更新
    intervalRef.current = requestAnimationFrame(updateProgress);
  };

  updateProgress();
};

注意：组件卸载时需调用cancelAnimationFrame(intervalRef.current)清理资源。

3. 辅助优化：减少不必要的重渲染

将展示进度的UI部分抽成独立组件，用React.memo包裹，避免因进度更新导致父组件整体重渲染：

const ProgressDisplay = React.memo(({ trackProgress, duration, trackProgressText, durationText, onScrub, onScrubEnd }) => (
  <>
    <input
      type="range"
      value={trackProgress}
      step=".1"
      min="0"
      max={duration || 0}
      className="progress"
      onChange={(e) => onScrub(e.target.value)}
      onMouseUp={onScrubEnd}
      onKeyUp={onScrubEnd}
    />
    <p>
      {trackProgressText.substring(1)}/{durationText.substring(1)}
    </p>
  </>
));

总结 #

优先选择方案1，它完全贴合原生音频的运行机制，能最大程度降低主线程资源占用，从根源解决麦克风占用时的卡顿问题。

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