当前位置：首页 > React

react实现录音功能

2026-01-26 23:31:49React

使用浏览器 MediaRecorder API 实现录音

React 中实现录音功能可以通过浏览器的 MediaRecorder API 结合 getUserMedia 实现。以下是一个基础实现方案：

安装必要依赖（如需要存储音频）：

npm install recordrtc

核心代码示例：

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

const AudioRecorder = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [audioURL, setAudioURL] = useState('');
  const mediaRecorderRef = useRef(null);
  const audioChunksRef = useRef([]);

  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      mediaRecorderRef.current = new MediaRecorder(stream);

      mediaRecorderRef.current.ondataavailable = (event) => {
        audioChunksRef.current.push(event.data);
      };

      mediaRecorderRef.current.onstop = () => {
        const audioBlob = new Blob(audioChunksRef.current);
        const audioUrl = URL.createObjectURL(audioBlob);
        setAudioURL(audioUrl);
        audioChunksRef.current = [];
      };

      mediaRecorderRef.current.start();
      setIsRecording(true);
    } catch (err) {
      console.error('Error accessing microphone:', err);
    }
  };

  const stopRecording = () => {
    mediaRecorderRef.current.stop();
    mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop());
    setIsRecording(false);
  };

  return (
    <div>
      <button onClick={isRecording ? stopRecording : startRecording}>
        {isRecording ? 'Stop Recording' : 'Start Recording'}
      </button>
      {audioURL && (
        <audio controls src={audioURL} />
      )}
    </div>
  );
};

export default AudioRecorder;

使用第三方库简化实现

对于更复杂的需求（如音频处理、格式转换），可以使用以下库：

react-mic：

npm install react-mic

示例代码：


import { ReactMic } from 'react-mic';

function App() { const [isRecording, setIsRecording] = useState(false); const [blobURL, setBlobURL] = useState('');

const onStop = (recordedBlob) => { setBlobURL(recordedBlob.blobURL); };

return (

setIsRecording(!isRecording)}> {isRecording ? 'Stop' : 'Start'}

); } ```

RecordRTC：提供更多高级功能如音频格式转换、视频录制等。

处理兼容性问题

不同浏览器的录音实现可能有差异，建议：

检测浏览器支持情况：

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
alert('Your browser does not support recording!');
}

添加 polyfill 对于旧版浏览器：
```
npm install webrtc-adapter
```

保存录音文件

将录音保存为可下载文件：

const downloadAudio = () => {
  const a = document.createElement('a');
  a.href = audioURL;
  a.download = 'recording.webm';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

服务器端存储

如需上传到服务器：

react实现录音功能

const uploadAudio = async () => {
  const audioBlob = new Blob(audioChunksRef.current);
  const formData = new FormData();
  formData.append('audio', audioBlob, 'recording.webm');

  try {
    await fetch('/upload-endpoint', {
      method: 'POST',
      body: formData
    });
  } catch (err) {
    console.error('Upload failed:', err);
  }
};