NextJS中获取音频文件时长出现随机值问题排查求助

针对你遇到的音频时长随机变化的问题，以下是几个关键的遗漏细节和解决方案：

• 处理音频props变化的竞态问题
  当父组件传入的audio地址切换时，旧的音频实例可能还在触发onLoadedMetadata事件，导致新的时长被旧值覆盖。需要监听audio props的变化，手动重置并重新加载音频：

  useEffect(() => {
    if (!audioRef.current) return;
    // 重置状态和音频实例
    setDuration(0);
    audioRef.current.pause();
    audioRef.current.currentTime = 0;
    // 重新加载新的音频资源
    audioRef.current.load();
  }, [audio]);
  

• 过滤无效的时长值
  浏览器在解析音频元数据时，可能会先返回NaN或0这类无效值，之后才会返回正确时长。在handleLoad中添加校验，避免错误状态更新：

  const handleLoad = () => {
    if (!audioRef.current) return;
    const currentDuration = audioRef.current.duration;
    // 仅当时长有效时更新状态
    if (!isNaN(currentDuration) && currentDuration > 0) {
      setDuration(currentDuration);
    }
  };
  

• 添加preload属性优化元数据加载
  给<audio>标签添加preload="metadata"属性，明确告诉浏览器优先加载音频的元数据（而非整个文件），能提升时长获取的准确性：

  <audio 
    src={audio}
    ref={audioRef}
    id="audio-player"
    onPlay={handlePlay}
    onEnded={handleEnd}
    onLoadedMetadata={handleLoad}
    preload="metadata" />
  

• 规避SSR环境的DOM差异
  Next.js服务端渲染时不存在HTMLAudioElement，可能导致初始状态异常。可以改用手动绑定事件的方式，确保只在客户端执行：

  useEffect(() => {
    const audioElement = audioRef.current;
    if (!audioElement) return;
  
    const handleMetadataLoad = () => {
      const dur = audioElement.duration;
      if (!isNaN(dur) && dur > 0) setDuration(dur);
    };
  
    audioElement.addEventListener('loadedmetadata', handleMetadataLoad);
    // 组件卸载时移除事件监听，避免内存泄漏
    return () => audioElement.removeEventListener('loadedmetadata', handleMetadataLoad);
  }, []);
  

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