React Native中Web MediaRecorder API的替代方案咨询

问题描述 #

我需要在React Native应用中获取可用于实时语音处理的媒体录制音频流，但Web端的MediaRecorder相关代码无法正常工作。是否有可实现相同功能的Node.js包或其他替代方案？

Web端原代码：

const stream = await mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });

可行的替代方案 #

1. react-native-audio-recorder-player #

这是React Native生态中常用的音频录制/播放库，支持实时获取音频振幅、录制时长等数据，满足基础实时处理需求：

• 安装命令：npm install react-native-audio-recorder-player
• 核心用法示例：

import AudioRecorderPlayer from 'react-native-audio-recorder-player';

const audioRecorderPlayer = new AudioRecorderPlayer();

// 启动录制并监听实时数据
const startRecording = async () => {
  await audioRecorderPlayer.startRecorder();
  audioRecorderPlayer.addRecordBackListener((event) => {
    // event.currentAmplitude 为实时音频振幅，可用于音量可视化等处理
    // event.currentPosition 为当前录制时长
    console.log('实时音频数据:', event);
    return;
  });
};

// 停止录制并移除监听
const stopRecording = async () => {
  await audioRecorderPlayer.stopRecorder();
  audioRecorderPlayer.removeRecordBackListener();
};

2. react-native-voice #

专注于语音交互场景的库，除了支持语音识别，还能实时获取音频音量变化数据，适合需要实时语音分析的场景：

• 安装命令：npm install react-native-voice
• 核心用法示例：

import Voice from 'react-native-voice';

// 初始化实时监听回调
Voice.onSpeechVolumeChanged = (event) => {
  // event.value 为实时音量值
  console.log('实时音量:', event.value);
};
Voice.onSpeechStart = () => console.log('语音输入开始');
Voice.onSpeechEnd = () => console.log('语音输入结束');

// 启动音频监听
const startListening = async () => {
  try {
    await Voice.start('zh-CN'); // 传入对应语言代码
  } catch (error) {
    console.error('启动监听失败:', error);
  }
};

// 停止音频监听
const stopListening = async () => {
  try {
    await Voice.stop();
  } catch (error) {
    console.error('停止监听失败:', error);
  }
};

3. expo-av（适用于Expo项目） #

如果你的项目基于Expo框架，expo-av提供了完整的音频录制能力，可通过定时查询录制状态实现实时数据获取：

• 安装命令：expo install expo-av
• 核心用法示例：

import { Audio } from 'expo-av';

let audioRecorder = null;
let statusInterval = null;

const startRecording = async () => {
  // 请求音频权限
  const { status } = await Audio.requestPermissionsAsync();
  if (status !== 'granted') return;

  // 创建录制实例
  const { recording } = await Audio.Recording.createAsync(
    Audio.RecordingOptionsPresets.HIGH_QUALITY
  );
  audioRecorder = recording;

  // 定时查询录制状态实现实时监听
  statusInterval = setInterval(async () => {
    const currentStatus = await audioRecorder.getStatusAsync();
    console.log('实时录制状态:', currentStatus);
  }, 100);
};

const stopRecording = async () => {
  if (audioRecorder) {
    await audioRecorder.stopAndUnloadAsync();
    clearInterval(statusInterval);
  }
};

内容的提问来源于stack exchange，提问作者Brijraj