当前位置：首页 > React

react如何实现录音

2026-02-11 18:41:39React

实现React录音功能

在React中实现录音功能通常需要借助浏览器提供的Web Audio API和MediaRecorder API。以下是实现步骤：

获取用户麦克风权限

使用navigator.mediaDevices.getUserMedia方法请求麦克风访问权限。该方法返回一个Promise，解析为音频流。

const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 处理音频流
  } catch (error) {
    console.error('Error accessing microphone:', error);
  }
};

创建MediaRecorder实例

获取音频流后，使用MediaRecorder API创建录音器实例。

const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];

mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    audioChunks.push(event.data);
  }
};

mediaRecorder.onstop = () => {
  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
  const audioUrl = URL.createObjectURL(audioBlob);
  // 处理录音结果
};

控制录音过程

提供开始、停止和暂停录音的控制方法。

mediaRecorder.start(); // 开始录音
mediaRecorder.stop();  // 停止录音
mediaRecorder.pause(); // 暂停录音
mediaRecorder.resume(); // 恢复录音

在React组件中集成

将录音逻辑封装到React组件中，使用useState和useEffect管理状态。

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

function Recorder() {
  const [isRecording, setIsRecording] = useState(false);
  const [audioUrl, setAudioUrl] = useState('');
  const [mediaRecorder, setMediaRecorder] = useState(null);

  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const recorder = new MediaRecorder(stream);
      const chunks = [];

      recorder.ondataavailable = (e) => chunks.push(e.data);
      recorder.onstop = () => {
        const blob = new Blob(chunks, { type: 'audio/wav' });
        setAudioUrl(URL.createObjectURL(blob));
      };

      recorder.start();
      setMediaRecorder(recorder);
      setIsRecording(true);
    } catch (error) {
      console.error(error);
    }
  };

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

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

处理兼容性问题

不同浏览器对音频格式的支持可能不同，建议检查浏览器兼容性并提供适当的MIME类型。

const mimeType = MediaRecorder.isTypeSupported('audio/webm') 
  ? 'audio/webm' 
  : 'audio/wav';

使用第三方库简化实现

对于更复杂的需求，可以考虑使用专门处理音频的React库：

react-media-recorder：提供现成的React组件和hooks
recordrtc：功能更强大的录音库
wavesurfer.js：适合需要可视化音频的应用

安装react-media-recorder示例：

npm install react-media-recorder

使用示例：

react如何实现录音

import { useReactMediaRecorder } from "react-media-recorder";

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

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