当前位置：首页 > React

react如何播放本地音频

2026-03-31 16:07:44React

使用HTML5 Audio标签

在React中可以直接使用HTML5的<audio>标签来播放本地音频文件。将音频文件放在项目的public文件夹中，通过src属性引用。

function AudioPlayer() {
  return (
    <audio controls>
      <source src="/audio.mp3" type="audio/mpeg" />
      您的浏览器不支持audio元素
    </audio>
  );
}

使用useRef控制播放

通过React的useRef钩子可以获取audio元素的引用，实现更灵活的控制。

import { useRef } from 'react';

function AudioPlayer() {
  const audioRef = useRef(null);

  const handlePlay = () => {
    audioRef.current.play();
  };

  const handlePause = () => {
    audioRef.current.pause();
  };

  return (
    <div>
      <audio ref={audioRef} src="/audio.mp3" />
      <button onClick={handlePlay}>播放</button>
      <button onClick={handlePause}>暂停</button>
    </div>
  );
}

使用第三方库react-audio-player

安装react-audio-player库可以快速实现音频播放功能。

npm install react-audio-player

import ReactAudioPlayer from 'react-audio-player';

function AudioPlayer() {
  return (
    <ReactAudioPlayer
      src="/audio.mp3"
      autoPlay={false}
      controls
    />
  );
}

处理动态导入的音频文件

当需要动态加载不同音频文件时，可以使用require.context或动态导入。

function AudioPlayer({ audioName }) {
  const audioSrc = require(`./audios/${audioName}.mp3`).default;

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

处理用户上传的音频

通过URL.createObjectURL可以将用户上传的文件转换为可播放的URL。

react如何播放本地音频

function AudioUploader() {
  const [audioSrc, setAudioSrc] = useState(null);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setAudioSrc(URL.createObjectURL(file));
    }
  };

  return (
    <div>
      <input type="file" accept="audio/*" onChange={handleFileChange} />
      {audioSrc && <audio controls src={audioSrc} />}
    </div>
  );
}