为何handlePlay函数中执行createObjectURL时出现报错？

错误原因 #

控制台报错TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.，本质是传入URL.createObjectURL的file参数不是有效的Blob/File对象，导致方法无法匹配正确的重载逻辑。

修复步骤 #

1. 确保playlist存储合法的File对象 #

检查handleFileChange实现，必须将选择的文件以File对象形式存入playlist。正确实现示例：

const [playlist, setPlaylist] = useState([]);

const handleFileChange = (e) => {
  // 将FileList转为数组，确保每个元素都是File实例
  const newFiles = Array.from(e.target.files);
  setPlaylist(prev => [...prev, ...newFiles]);
};

2. 修正handlePlay逻辑，增加校验与内存泄漏处理 #

修改播放逻辑，先校验文件类型，同时避免重复创建ObjectURL导致内存泄漏：

const handlePlay = (index) => {
  setCurrentTrackIndex(index);
  const audio = audioRef.current;
  const file = playlist[index];

  // 先校验是否为合法File对象
  if (file instanceof File) {
    try {
      // 释放之前的ObjectURL，避免内存泄漏
      if (audio.src) {
        URL.revokeObjectURL(audio.src);
      }

      const audioUrl = URL.createObjectURL(file);
      audio.src = audioUrl;
      
      // 捕获播放失败错误（比如浏览器自动播放限制）
      audio.play().catch(playErr => {
        console.error("Failed to start playback:", playErr);
        // 可添加提示用户手动点击播放的逻辑
      });

      // 播放结束后释放当前ObjectURL
      const cleanup = () => {
        URL.revokeObjectURL(audioUrl);
        audio.removeEventListener('ended', cleanup);
      };
      audio.addEventListener('ended', cleanup);
    } catch (error) {
      console.error("Error playing audio:", error);
    }
  } else {
    console.error("Invalid file: not a File object", file);
  }
};

3. 确认audioRef正确初始化 #

确保组件内正确创建音频元素的ref：

const audioRef = useRef(null);

额外说明 #

• 浏览器自动播放政策可能导致audio.play()失败，此时需引导用户手动点击音频控件的播放按钮。
• 每次创建ObjectURL后，务必在播放结束或切换音频时调用URL.revokeObjectURL()释放资源，避免内存占用过高。

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