使用lamejs编码Blob转MP3遇异常：录音文件过短且仅含杂音

嘿，我来帮你捋清楚这个录音转MP3的问题！你的代码里有几个关键逻辑错误，导致生成的文件异常，咱们一步步拆解修复：

核心问题分析 #

1. 没真正启动MediaRecorder录制
   你的代码里只创建了MediaRecorder实例，但完全没调用mediaRecorder.start()，所以根本没开始采集音频数据，自然只能拿到极少量的无效数据。

2. 错误处理MediaRecorder的输出格式
   MediaRecorder默认输出的是压缩后的音频Blob（比如WebM/Opus格式），不是lamejs需要的原始PCM采样数据。你直接把这种压缩二进制转成Int16Array当成采样处理，必然会出现杂音。

3. 数据收集逻辑混乱
   mp3Data数组定义在fileReader.onload内部，每次触发ondataavailable都会重新创建，根本存不下完整的编码片段；而且FileReader的使用完全是冗余的，没必要把Blob转成ArrayBuffer再处理。

修正后的完整代码示例 #

我们换一种方式：用AudioContext直接获取原始PCM采样，再传给lamejs编码，这样就能得到正常的MP3文件了：

// 全局变量存储编码器和编码片段，确保跨回调可用
let mp3Encoder;
let mp3Data = [];
const config = {
  sampleRate: 44100,
  channels: 1, // 单声道
  bitRate: 128 // 比特率
};

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 创建音频上下文，对接麦克风流
    const audioContext = new AudioContext({ sampleRate: config.sampleRate });
    const source = audioContext.createMediaStreamSource(stream);
    
    // 创建脚本处理器，用于获取原始PCM采样
    // 注意：ScriptProcessorNode已标记为废弃，但兼容性更好，演示用没问题；生产推荐AudioWorklet
    const processor = audioContext.createScriptProcessor(4096, config.channels, config.channels);

    // 初始化lamejs编码器
    mp3Encoder = new lamejs.Mp3Encoder(
      config.channels,
      config.sampleRate,
      config.bitRate
    );

    // 实时处理音频采样
    processor.onaudioprocess = function(e) {
      // 获取单声道的Float32格式采样
      const floatSamples = e.inputBuffer.getChannelData(0);
      // 转换为lamejs需要的Int16格式
      const int16Samples = convertFloat32ToInt16(floatSamples);
      // 编码采样并收集片段
      const mp3Chunk = mp3Encoder.encodeBuffer(int16Samples);
      if (mp3Chunk.length > 0) {
        mp3Data.push(mp3Chunk);
      }
    };

    // 连接音频节点链
    source.connect(processor);
    processor.connect(audioContext.destination);

    // 示例：录制5秒后自动停止并下载文件
    setTimeout(() => {
      // 停止处理，清理资源
      processor.disconnect();
      source.disconnect();
      audioContext.close();
      
      // 完成编码，获取最后一段数据
      const finalChunk = mp3Encoder.flush();
      if (finalChunk.length > 0) {
        mp3Data.push(finalChunk);
      }

      // 创建MP3文件并下载
      const mp3Blob = new Blob(mp3Data, { type: 'audio/mp3' });
      const downloadLink = document.createElement('a');
      downloadLink.href = URL.createObjectURL(mp3Blob);
      downloadLink.download = 'audio-recording.mp3';
      downloadLink.click();
      URL.revokeObjectURL(downloadLink.href);
    }, 5000);
  })
  .catch(err => console.error('麦克风权限获取失败:', err));

// 辅助函数：将AudioContext输出的Float32采样转为Int16
function convertFloat32ToInt16(floatBuffer) {
  const intBuffer = new Int16Array(floatBuffer.length);
  for (let i = 0; i < floatBuffer.length; i++) {
    // 把[-1, 1]范围的Float32值映射到Int16的[-32768, 32767]
    intBuffer[i] = Math.min(1, Math.max(-1, floatBuffer[i])) * 0x7FFF;
  }
  return intBuffer;
}

关键修正点说明 #

• 直接获取原始PCM：通过AudioContext和ScriptProcessorNode拿到未压缩的音频采样，这是lamejs能正确编码的前提。
• 格式转换：把AudioContext输出的Float32采样转成lamejs需要的Int16格式，保证编码逻辑正确。
• 完整数据收集：把编码器和数据数组放在全局/闭包中，确保所有编码片段都被保存，最后调用flush()获取剩余的编码数据。
• 明确的启停逻辑：示例用定时器模拟停止录制，实际项目中可以绑定按钮点击事件来控制启停。

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