当前位置：首页 > React

react如何实现录音

2026-01-15 09:49:56React

使用React实现录音功能

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

获取用户麦克风权限

需要请求用户授权访问麦克风设备，使用navigator.mediaDevices.getUserMedia方法：

const [stream, setStream] = useState(null);

async function startRecording() {
  try {
    const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    setStream(audioStream);
  } catch (error) {
    console.error('Error accessing microphone:', error);
  }
}

创建MediaRecorder实例

获取音频流后，可以创建MediaRecorder实例：

const [mediaRecorder, setMediaRecorder] = useState(null);
const [audioChunks, setAudioChunks] = useState([]);

function setupMediaRecorder() {
  const recorder = new MediaRecorder(stream);

  recorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
      setAudioChunks(prev => [...prev, event.data]);
    }
  };

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

  setMediaRecorder(recorder);
}

控制录音过程

实现开始、停止录音的功能：

function startRecordingProcess() {
  mediaRecorder.start();
  // 可以设置定时获取数据片段
  setInterval(() => {
    mediaRecorder.requestData();
  }, 1000);
}

function stopRecording() {
  mediaRecorder.stop();
  // 停止所有流中的轨道
  stream.getTracks().forEach(track => track.stop());
}

完整组件示例

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

function AudioRecorder() {
  const [stream, setStream] = useState(null);
  const [mediaRecorder, setMediaRecorder] = useState(null);
  const [audioChunks, setAudioChunks] = useState([]);
  const [isRecording, setIsRecording] = useState(false);
  const [audioUrl, setAudioUrl] = useState(null);

  useEffect(() => {
    return () => {
      if (stream) {
        stream.getTracks().forEach(track => track.stop());
      }
    };
  }, [stream]);

  async function startRecording() {
    try {
      const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      setStream(audioStream);

      const recorder = new MediaRecorder(audioStream);

      recorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          setAudioChunks(prev => [...prev, event.data]);
        }
      };

      recorder.onstop = () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
        const url = URL.createObjectURL(audioBlob);
        setAudioUrl(url);
      };

      setMediaRecorder(recorder);
      recorder.start();
      setIsRecording(true);

    } catch (error) {
      console.error('Error:', error);
    }
  }

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

  return (
    <div>
      <button onClick={startRecording} disabled={isRecording}>
        开始录音
      </button>
      <button onClick={stopRecording} disabled={!isRecording}>
        停止录音
      </button>
      {audioUrl && (
        <audio controls src={audioUrl} />
      )}
    </div>
  );
}

export default AudioRecorder;