React组件中HTML5 Audio元素获取元数据时Ref为Null的问题求助

我来帮你解决这个问题！你遇到的Cannot set property 'onloadedmetadata' of null错误，核心原因是React的函数式ref回调会被调用两次：第一次是在组件卸载或者初始渲染的某个阶段传入null，第二次才会传入真正的<audio> DOM元素。直接给input绑定事件的话，第一次调用时input就是null，自然会报错。

下面给你两种可行的解决方案：

方案一：在ref回调中增加null判断 #

最简单的修复方式就是在绑定事件前先检查input是否存在，避免给null赋值：

<audio controls="controls" ref={(input) => { 
  // 先判断input不为null，再绑定事件
  if (input) {
    input.onloadedmetadata = () => { 
      const duration = input.duration; 
      console.log("Duration: " + duration); 
    }
  }
}}> 
  <source src={this.state.audiourl} type="audio/mpeg" /> 
</audio>

这种方法能快速解决当前报错，但如果你的音频URL会动态变化（比如this.state.audiourl更新），可能需要额外处理重新绑定事件的逻辑。

方案二：使用createRef结合生命周期方法（类组件） #

如果是类组件，更健壮的方式是使用React.createRef()创建ref，然后在生命周期方法中绑定事件，这样能更好地处理音频URL变化的场景，还能避免重复绑定导致的内存泄漏：

class AudioPlayer extends React.Component {
  // 创建ref实例
  audioRef = React.createRef();

  componentDidMount() {
    // 组件挂载时设置监听
    this.setupMetadataListener();
  }

  componentDidUpdate(prevState) {
    // 当音频URL变化时，重新设置监听
    if (prevState.audiourl !== this.state.audiourl) {
      this.setupMetadataListener();
    }
  }

  setupMetadataListener() {
    const audioElement = this.audioRef.current;
    if (!audioElement) return;

    // 先移除旧的监听，防止重复绑定
    audioElement.removeEventListener('loadedmetadata', this.handleMetadataLoaded);
    // 绑定新的监听
    audioElement.addEventListener('loadedmetadata', this.handleMetadataLoaded);
  }

  // 抽离事件处理函数，方便复用和移除
  handleMetadataLoaded = () => {
    const duration = this.audioRef.current.duration;
    console.log("Duration: " + duration);
  }

  render() {
    return (
      <audio controls="controls" ref={this.audioRef}> 
        <source src={this.state.audiourl} type="audio/mpeg" /> 
      </audio>
    );
  }
}

额外补充：函数组件的解决方案 #

如果是函数组件，可以用useRef和useEffect来实现类似逻辑，useEffect的依赖数组可以确保音频URL变化时重新绑定事件：

import { useRef, useEffect, useState } from 'react';

function AudioPlayer() {
  const [audioUrl, setAudioUrl] = useState('');
  const audioRef = useRef(null);

  useEffect(() => {
    const audioElement = audioRef.current;
    if (!audioElement) return;

    const handleMetadataLoaded = () => {
      console.log("Duration: " + audioElement.duration);
    };

    audioElement.addEventListener('loadedmetadata', handleMetadataLoaded);

    // 清理函数：组件卸载或依赖变化时移除监听
    return () => {
      audioElement.removeEventListener('loadedmetadata', handleMetadataLoaded);
    };
  }, [audioUrl]); // 当audioUrl变化时重新执行副作用

  return (
    <audio controls ref={audioRef}>
      <source src={audioUrl} type="audio/mpeg" />
    </audio>
  );
}

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