react如何实现录音

使用 MediaRecorder API 实现录音

在 React 中实现录音功能可以通过浏览器的 MediaRecorder API 完成。以下是实现步骤：

1. 获取用户麦克风权限

   navigator.mediaDevices.getUserMedia({ audio: true })
     .then(stream => {
       // 处理音频流
     })
     .catch(error => {
       console.error('麦克风访问被拒绝:', error);
     });

2. 创建 MediaRecorder 实例

   const mediaRecorder = new MediaRecorder(stream);
   let audioChunks = [];
   
   mediaRecorder.ondataavailable = event => {
     audioChunks.push(event.data);
   };

3. 开始和停止录音

   mediaRecorder.start(); // 开始录音
   mediaRecorder.stop();  // 停止录音

4. 处理录音结果

   mediaRecorder.onstop = () => {
     const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
     const audioUrl = URL.createObjectURL(audioBlob);
     audioChunks = []; // 清空缓存
   };

封装为 React 组件

将录音逻辑封装为自定义 Hook useRecorder：

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

function useRecorder() {
  const [isRecording, setIsRecording] = useState(false);
  const [audioUrl, setAudioUrl] = useState('');
  const mediaRecorder = useRef(null);
  const audioChunks = useRef([]);

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

  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      mediaRecorder.current = new MediaRecorder(stream);
      mediaRecorder.current.ondataavailable = e => {
        audioChunks.current.push(e.data);
      };
      mediaRecorder.current.onstop = () => {
        const blob = new Blob(audioChunks.current, { type: 'audio/wav' });
        setAudioUrl(URL.createObjectURL(blob));
        audioChunks.current = [];
      };
      mediaRecorder.current.start();
      setIsRecording(true);
    } catch (err) {
      console.error('录音失败:', err);
    }
  };

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

  return { isRecording, audioUrl, startRecording, stopRecording };
}

在组件中使用

function AudioRecorder() {
  const { isRecording, audioUrl, startRecording, stopRecording } = useRecorder();

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

注意事项

1. 浏览器兼容性

   • MediaRecorder API 在大多数现代浏览器中可用，但在 Safari 上可能需要 polyfill
   • 不同浏览器支持的音频格式可能不同

2. 用户权限

   • 需要在 HTTPS 环境或 localhost 下运行
   • 首次访问时需要用户明确授权麦克风权限

3. 性能优化

   

   • 录音时间较长时，注意内存管理
   • 可添加最大录音时长限制

4. 错误处理

   • 处理用户拒绝权限的情况
   • 处理设备不可用的情况

扩展功能

1. 可视化音频波形

   // 使用 Web Audio API 分析音频数据
   const audioContext = new AudioContext();
   const analyser = audioContext.createAnalyser();

2. 录音质量控制

   // 设置录音参数
   const options = {
     audioBitsPerSecond: 128000,
     mimeType: 'audio/webm'
   };
   new MediaRecorder(stream, options);

3. 多格式支持

   // 检测支持的 MIME 类型
   MediaRecorder.isTypeSupported('audio/mp3');

以上代码提供了 React 中实现录音功能的核心逻辑，可根据实际需求进行调整和扩展。