React中使用HTML5 Audio组件报错，原纯HTML/JS代码可正常运行

核心错误点 #

1. 字符串ref已废弃且无法正确获取DOM元素
   React中字符串类型的ref早已被官方废弃，在函数组件里用这种方式根本拿不到audio的DOM节点，后续设置播放片段、调用播放方法的代码自然会报错。

2. 音频资源路径不完整
   你写的React代码里src="http://filename"缺少.mp3后缀，浏览器识别不出这是合法的音频资源，会直接加载失败。

修复方案 #

步骤1：用useRef钩子正确获取DOM元素（函数组件场景）

在函数组件里，必须通过useRef创建并绑定ref，才能拿到真实的audio DOM节点：

import { useRef } from 'react';

function App() {
  // 创建ref对象
  const audioRef = useRef(null);

  // 播放指定片段的示例函数
  const playTargetSegment = () => {
    if (audioRef.current) {
      audioRef.current.currentTime = 5; // 设置从第5秒开始播放
      audioRef.current.play().catch(err => console.error(err));
    }
  };

  return (
    <div>
      {/* 将ref绑定到audio标签 */}
      <audio 
        ref={audioRef} 
        preload="auto" 
        src="http://filename.mp3" 
        type="audio/mpeg" 
      />
      <button onClick={playTargetSegment}>播放指定片段</button>
    </div>
  );
}

export default App;

步骤2：补全音频资源路径

确保src属性指向完整的MP3文件地址，加上.mp3后缀，让浏览器能正确识别并加载音频。

类组件场景补充 #

如果是类组件，用React.createRef()创建ref即可，用法和函数组件类似：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.audioRef = React.createRef();
  }

  playTargetSegment = () => {
    if (this.audioRef.current) {
      this.audioRef.current.currentTime = 5;
      this.audioRef.current.play();
    }
  };

  render() {
    return (
      <div>
        <audio ref={this.audioRef} preload="auto" src="http://filename.mp3" type="audio/mpeg" />
        <button onClick={this.playTargetSegment}>播放指定片段</button>
      </div>
    );
  }
}

注意：操作音频前一定要先判断ref.current是否存在，避免DOM还没挂载就调用方法导致报错。

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