React JS中如何压缩MP3音频并降低上传至AWS的比特率

你可以通过前端直接调整MP3比特率后再上传到AWS，以下是具体实现方案：

1. 使用lamejs库处理MP3压缩 #

lamejs是纯JS实现的MP3编码库，能在浏览器中直接将音频编码为指定比特率的MP3：

• 安装依赖：

npm install lamejs

• 核心压缩逻辑示例：

import lamejs from 'lamejs';

// 接收PCM音频数据、采样率、声道数，返回压缩后的MP3 Blob
function compressMP3(pcmData, sampleRate, channels) {
  // 第三个参数为目标比特率，可按需调整（语音场景推荐32-64kbps，音乐可选128-192kbps）
  const mp3encoder = new lamejs.Mp3Encoder(channels, sampleRate, 64);
  const buffer = [];
  const chunkSize = 1152; // lamejs要求的单块处理样本数
  let remaining = pcmData.length;

  // 分块编码音频
  while (remaining >= chunkSize) {
    const chunk = pcmData.subarray(pcmData.length - remaining, pcmData.length - remaining + chunkSize);
    const mp3buf = mp3encoder.encodeBuffer(chunk);
    if (mp3buf.length > 0) {
      buffer.push(new Int8Array(mp3buf));
    }
    remaining -= chunkSize;
  }

  // 处理剩余样本并完成编码
  const mp3buf = mp3encoder.flush();
  if (mp3buf.length > 0) {
    buffer.push(new Int8Array(mp3buf));
  }

  return new Blob(buffer, { type: 'audio/mp3' });
}

2. 结合录制与上传流程调整 #

从AudioReactRecorder拿到录制数据后，先解码为PCM再压缩，最后上传到AWS：

// 假设已从AudioReactRecorder获取到录制的音频Blob
async function processAndUploadRecordedAudio(recordedBlob) {
  const audioContext = new AudioContext();
  // 将Blob解码为AudioBuffer
  const arrayBuffer = await recordedBlob.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

  // 将AudioBuffer转换为lamejs需要的Int16Array格式PCM数据
  const channelData = audioBuffer.getChannelData(0); // 单声道处理，立体声需循环多声道
  const pcmData = new Int16Array(channelData.length);
  for (let i = 0; i < channelData.length; i++) {
    pcmData[i] = Math.min(1, Math.max(-1, channelData[i])) * 32767;
  }

  // 压缩MP3
  const compressedBlob = compressMP3(pcmData, audioBuffer.sampleRate, audioBuffer.numberOfChannels);

  // 用react-s3上传压缩后的文件
  const uploadResult = await S3Client.upload(compressedBlob, 'your-compressed-audio.mp3');
  console.log('上传完成', uploadResult);
}

3. 关键注意事项 #

• 比特率选择：语音类音频用32-64kbps就能保证清晰，音乐类可根据需求提升到128kbps以上，平衡音质与文件大小
• 录制输出兼容：如果AudioReactRecorder直接输出MP3，需要先解码为PCM再重新编码为低比特率版本
• 浏览器兼容性：现代浏览器都支持AudioContext及相关API，无需额外兼容处理

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