当前位置：首页 > React

react如何实现录音

2026-02-26 04:48:06React

使用浏览器原生API实现录音

React中实现录音功能可以借助浏览器的MediaRecorder API。需要获取用户麦克风权限并处理音频数据流。

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 = () => {
    if (mediaRecorderRef.current) {
      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录音库如react-media-recorder：

import React from 'react';
import { useReactMediaRecorder } from 'react-media-recorder';

const RecordView = () => {
  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl
  } = useReactMediaRecorder({ audio: true });

  return (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
      <audio src={mediaBlobUrl} controls />
    </div>
  );
};

处理音频格式和质量

可以通过配置MediaRecorder的mimeType参数来指定音频格式：

react如何实现录音

const options = {
  audioBitsPerSecond: 128000,
  mimeType: 'audio/webm'
};
const mediaRecorder = new MediaRecorder(stream, options);

常见音频格式包括：

audio/webm (Chrome/Firefox)
audio/mp4 (Safari)
audio/ogg

保存录音文件

将录音保存为文件可以通过创建下载链接实现：

react如何实现录音

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

错误处理和兼容性检查

在开始录音前应该检查浏览器兼容性：

if (!navigator.mediaDevices || !window.MediaRecorder) {
  alert('Your browser does not support audio recording');
  return;
}

处理可能的权限拒绝情况：

const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // ... recording setup
  } catch (err) {
    if (err.name === 'NotAllowedError') {
      alert('Microphone access was denied');
    } else {
      console.error('Recording error:', err);
    }
  }
};

服务器端上传处理

如需将录音上传到服务器，可以使用FormData：

const uploadRecording = async () => {
  const audioBlob = await fetch(audioURL).then(r => r.blob());
  const formData = new FormData();
  formData.append('audio', audioBlob, 'recording.webm');

  try {
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    // handle response
  } catch (error) {
    console.error('Upload failed:', error);
  }
};