Chrome/Firefox录制的音频无法在iOS App播放问题求助

核心问题 #

Chrome、Firefox录制的音频无法在iOS App播放，Safari录制的可以，本质是录制的音频编码/容器格式不被iOS原生播放器支持。

原因拆解 #

• Chrome、Firefox的MediaRecorder默认采用WebM容器+Opus编码，这种格式在Android上支持良好，但iOS（尤其是App内置播放器）对Opus编码的WebM支持有限；
• Safari的MediaRecorder默认使用MP4容器+AAC编码，这是iOS原生完全兼容的音频格式，所以两端都能正常播放；
• 你代码里虽然把Blob和File的type设为audio/mpeg，但这只是修改了文件的标识头，实际音频数据还是浏览器默认的编码（WebM/Opus），并没有真正转成MP3，所以iOS无法识别。

解决方案 #

方案1：前端强制录制iOS兼容格式 #

让Chrome/Firefox也录制AAC编码的MP4格式，步骤如下：

1. 先检测浏览器支持的兼容MIME类型；
2. 用该类型初始化MediaRecorder；
3. 创建Blob和File时使用实际的MIME类型。

修改后的代码：

import * as toast from "../Toast";

export default function recordAudio() {
  return new Promise((resolve) => {
    navigator.mediaDevices
      .getUserMedia({ audio: true })
      .then((stream) => {
        // 优先选择iOS兼容的MIME类型
        const supportedMimeTypes = [
          'audio/mp4;codecs=aac',
          'audio/webm;codecs=opus',
          'audio/mpeg'
        ];
        const mimeType = supportedMimeTypes.find(type => MediaRecorder.isTypeSupported(type));

        const mediaRecorder = new MediaRecorder(stream, {
          audioBitsPerSecond: 32000,
          mimeType: mimeType
        });

        const audioChunks = [];

        mediaRecorder.addEventListener("dataavailable", (event) => {
          audioChunks.push(event.data);
        });

        function start() {
          mediaRecorder.start();
        }

        function pause() {
          mediaRecorder.pause();
        }

        function resume() {
          mediaRecorder.resume();
        }

        function stop() {
          return new Promise((resolve) => {
            mediaRecorder.addEventListener("stop", () => {
              const audioName = mimeType.includes('mp4') ? "audio.mp4" : "audio.webm";

              const blobData = new Blob(audioChunks, {
                type: mimeType
              });
              const audioFile = new File([blobData], audioName, {
                type: mimeType
              });
              const audioUrl = URL.createObjectURL(audioFile);
              const audio = new Audio(audioUrl);
              function play() {
                audio.play();
              }

              stream.getTracks()[0].stop();

              resolve({ audioFile, audioUrl, play, audioName });
            });

            mediaRecorder.stop();
          });
        }

        resolve({ start, stop, pause, resume });
      })
      .catch((error) => {
        toast.info(
          "To record Voice Messages, application needs access to your computer’s microphone. Click in the URL bar and set “Use the Microphone” to “Allow.” "
        );
      });
  });
}

方案2：服务器端统一转码 #

如果前端兼容性要求高（比如要支持旧浏览器），可以在服务器对上传的音频进行转码，统一转换成AAC编码的MP4格式。推荐用FFmpeg工具，示例命令：

ffmpeg -i [上传的音频文件路径] -c:a aac -b:a 32k [输出文件路径].mp4

转码后再提供给客户端，就能保证iOS和Android都能正常播放。

方案3：iOS App端适配格式 #

如果无法修改前端和服务器，可以在iOS App中集成第三方解码库（如FFmpegKit），让播放器支持WebM/Opus格式的解码播放。但这种方式需要修改App代码，适配成本较高，优先级低于前两种方案。

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