React音频录制遇难题求方案：无时长+iOS无法播放

问题背景 #

尝试使用原生MediaRecorder API录制音频，后续又测试了react-audio-voice-recorder、react-mic等第三方库，均遇到两个核心问题：

• 输出文件无时长元数据，导致音频播放器无法正常显示时间轴
• 文件可在安卓设备播放，但无法在iPhone设备播放

React-Mic-Gold的示例能满足需求，但该库已停止维护，需寻找可行的替代方案或解决办法。

核心问题根源 #

这两个问题本质是录制生成的音频文件缺少完整的容器头信息，或编码格式不兼容iOS的AVFoundation框架：

• 原生MediaRecorder默认生成的Blob常仅包含原始音频数据，无标准文件结构，播放器无法解析时长
• iOS对Opus等部分编码支持有限，仅对AAC编码的MP4格式兼容性最好

具体解决步骤 #

1. 修复时长元数据缺失问题 #

录制完成后手动补全音频文件的标准容器头，以WAV格式为例，可通过计算音频参数生成完整WAV头：

// 为音频Blob添加WAV头
function addWavHeader(audioBlob, sampleRate = 44100, channels = 1) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const audioData = new Uint8Array(e.target.result);
      const wavHeader = createWavHeader(audioData.length, sampleRate, channels);
      const wavData = new Uint8Array(wavHeader.length + audioData.length);
      wavData.set(wavHeader, 0);
      wavData.set(audioData, wavHeader.length);
      resolve(new Blob([wavData], { type: 'audio/wav' }));
    };
    reader.readAsArrayBuffer(audioBlob);
  });
}

// 生成标准WAV头
function createWavHeader(dataLength, sampleRate, channels) {
  const buffer = new ArrayBuffer(44);
  const view = new DataView(buffer);
  
  // RIFF标识
  view.setUint8(0, 82); view.setUint8(1, 73); view.setUint8(2, 70); view.setUint8(3, 70);
  // RIFF块长度
  view.setUint32(4, 36 + dataLength, true);
  // WAVE标识
  view.setUint8(8, 87); view.setUint8(9, 65); view.setUint8(10, 86); view.setUint8(11, 69);
  // fmt子块标识
  view.setUint8(12, 102); view.setUint8(13, 109); view.setUint8(14, 116); view.setUint8(15, 32);
  // fmt子块长度
  view.setUint32(16, 16, true);
  // 音频格式（PCM=1）
  view.setUint16(20, 1, true);
  // 声道数
  view.setUint16(22, channels, true);
  // 采样率
  view.setUint32(24, sampleRate, true);
  // 字节率
  view.setUint32(28, sampleRate * channels * 2, true);
  // 块对齐
  view.setUint16(32, channels * 2, true);
  // 采样位深
  view.setUint16(34, 16, true);
  // data子块标识
  view.setUint8(36, 100); view.setUint8(37, 97); view.setUint8(38, 116); view.setUint8(39, 97);
  // data子块长度
  view.setUint32(40, dataLength, true);
  
  return new Uint8Array(buffer);
}

2. 解决iOS播放兼容问题 #

将录制的音频转码为iOS支持的AAC编码MP4格式，可使用ffmpeg.wasm在前端完成转码：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: false });

// 将音频Blob转码为MP4格式
async function convertToMp4(audioBlob) {
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'input.webm', await fetchFile(audioBlob));
  await ffmpeg.run('-i', 'input.webm', '-c:a', 'aac', '-b:a', '128k', 'output.mp4');
  const data = ffmpeg.FS('readFile', 'output.mp4');
  const mp4Blob = new Blob([data.buffer], { type: 'audio/mp4' });
  // 清理临时文件
  ffmpeg.FS('unlink', 'input.webm');
  ffmpeg.FS('unlink', 'output.mp4');
  return mp4Blob;
}

3. 替代停止维护的React-Mic-Gold #

• 自行封装基于原生MediaRecorder的组件，结合上述补头、转码逻辑，控制录制的mimeType为audio/mp4（需确认浏览器支持）
• 使用维护活跃的第三方库：react-media-recorder，支持自定义编码格式，社区更新频繁

验证方法 #

• 录制完成后，通过FileReader读取文件，检查是否包含标准容器头信息
• 在iPhone设备上用Safari或系统自带播放器测试播放，确认时长显示正常且可正常播放

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