React Native实现音频录制流式传输至后端的方案咨询

一、react-native-audio-recorder-player 能否实现流式传输？ #

不行。这个库核心逻辑是将音频录制为本地文件，不提供实时获取音频数据块的API，无法直接实现流式传输。如果坚持使用它，只能通过定时读取录制文件的新增片段模拟流式，但这种方式延迟高、文件片段处理复杂，不推荐。

二、可行实现方向 #

1. 换用支持实时音频缓冲区获取的RN库 #

选择能直接获取录制过程中原始音频数据块的库，比如：

• react-native-audio：支持监听录制进度事件，获取PCM格式的原始音频数据
• expo-av：配置录制参数后，可通过状态监听或数据提取接口获取音频缓冲区数据
• react-native-voice：虽主打语音识别，但也能配置获取原始音频流

以react-native-audio为例的核心代码：

import AudioRecorder from 'react-native-audio';

// 配置录制参数（匹配Whisper要求：16kHz单声道PCM）
const recordingOptions = {
  sampleRate: 16000,
  channels: 1,
  audioQuality: 'low',
  format: 'pcm',
  audioEncoding: 'pcm'
};

// 初始化录制
AudioRecorder.prepareRecordingAtPath('', recordingOptions);

// 监听音频数据块
AudioRecorder.onProgress = (rawData) => {
  // rawData为PCM格式的ArrayBuffer或base64字符串
  // 直接流式发送至后端
  sendAudioChunk(rawData);
};

// 启动录制
AudioRecorder.startRecording();

// 停止录制时发送最后一块数据
const stopRecording = async () => {
  await AudioRecorder.stopRecording();
  sendFinalChunk();
};

2. 流式传输与后端处理逻辑 #

• 前端：按固定时长（如500ms-1s）切割音频数据块，通过HTTP流式请求（如Fetch API的ReadableStream、Axios的流式配置）发送至后端，避免频繁请求。
• 后端：接收流式数据后，拼接成完整的PCM音频流，直接转发至OpenAI Whisper的流式转写API（需启用stream: true参数），再将实时转写结果返回给前端。

3. 解决react-native-audio-react的拼接失败问题 #

你之前遇到的base64块拼接无效，本质是每个块是无容器的原始PCM数据，缺少音频格式头（如WAV头），导致无法被播放器识别。解决方案：

• 前端发送第一个数据块时，先发送自定义的WAV头（基于录制参数生成），后续仅发送PCM数据块；
• 后端统一拼接所有PCM数据，添加WAV头后再传给Whisper（或直接转发PCM流，Whisper原生支持PCM输入）；
• 若要在前端验证拼接效果，需将所有PCM块合并后，手动添加WAV头再转成Blob。

三、关键注意事项 #

• 音频格式必须严格匹配Whisper要求：16kHz采样率、单声道、PCM编码（或WAV容器）；
• 控制数据块大小：过小的块会增加请求开销，过大的块会提升延迟，建议500ms-1s的音频数据为一个块；
• 处理异常场景：录制中断、网络波动时，需确保数据不丢失，前端可缓存未发送的块，恢复后重发。

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