React中iOS端文本转语音API适配问题：MP3替代方案及设备检测

核心思路 #

iOS和Mac的Safari浏览器对MP3格式的base64音频存在兼容性限制，尤其是特定编码的MP3文件。可以通过检测设备类型，为苹果设备切换到AAC或WAV格式，同时优化音频数据的加载方式来解决问题。

步骤1：实现设备检测函数 #

通过navigator.platform实现更可靠的苹果设备检测：

const isAppleDevice = () => {
  return ['MacIntel', 'iPhone', 'iPad', 'iPod'].includes(navigator.platform);
};

步骤2：根据设备切换音频格式 #

假设你的convertTextToVoiceAPI支持通过参数指定输出格式，修改代码如下：

const playAudio = async () => {
  if (props.currentA !== props.key) {
    props.setCurrentA(props.key);
    setLoading(true);
    
    // 判断设备类型，选择对应音频格式
    const isApple = isAppleDevice();
    const audioFormat = isApple ? 'aac' : 'mp3';
    const mimeType = isApple ? 'audio/aac' : 'audio/mp3';

    // 请求对应格式的音频base64数据
    const audio = await convertTextToVoice(props.text, { format: audioFormat });
    
    // 生成音频源
    const audioSrc = `data:${mimeType};base64,${audio}`;
    
    setAudio(audioSrc);
    setLoading(false);
    setPlaying(true);
  }
};

步骤3：iOS兼容性优化（可选） #

如果base64格式的音频仍无法播放，可将base64转换为Blob对象并生成Object URL（Safari更推荐这种方式）：

// 工具函数：base64转Blob
const base64ToBlob = (base64Data, mimeType) => {
  const byteCharacters = atob(base64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = slice.split('').map(char => char.charCodeAt(0));
    byteArrays.push(new Uint8Array(byteNumbers));
  }

  return new Blob(byteArrays, { type: mimeType });
};

// 修改playAudio中的音频源生成逻辑
const playAudio = async () => {
  if (props.currentA !== props.key) {
    props.setCurrentA(props.key);
    setLoading(true);
    
    const isApple = isAppleDevice();
    const audioFormat = isApple ? 'aac' : 'mp3';
    const mimeType = isApple ? 'audio/aac' : 'audio/mp3';

    const audio = await convertTextToVoice(props.text, { format: audioFormat });
    const audioBlob = base64ToBlob(audio, mimeType);
    // 生成Object URL
    const audioSrc = URL.createObjectURL(audioBlob);
    
    setAudio(audioSrc);
    setLoading(false);
    setPlaying(true);
  }
};

// 组件卸载时释放Object URL，避免内存泄漏
useEffect(() => {
  return () => {
    if (audio) {
      URL.revokeObjectURL(audio);
    }
  };
}, [audio]);

注意事项 #

• 先确认你的文本转音频API是否支持输出AAC或WAV格式，若不支持优先联系API服务商添加该功能；无法修改API时，前端转码性能开销大，不推荐。
• WAV格式兼容性最好，但文件体积远大于MP3/AAC，需权衡加载速度和兼容性。

内容的提问来源于stack exchange，提问作者Muhammad Hassan Jawwad