ios 系统原生不支持 base64 编码的 mp3 音频数据 uri 播放，需检测设备类型并动态切换为 wav 格式，才能确保 text-to-speech 在 iphone/ipad 上正常播放。

ios 系统原生不支持 base64 编码的 mp3 音频数据 uri 播放，需检测设备类型并动态切换为 wav 格式，才能确保 text-to-speech 在 iphone/ipad 上正常播放。

在 React 应用中集成文本转语音（TTS）功能时，一个常见但易被忽视的兼容性问题是：MP3 格式的 base64 数据 URI 在 iOS Safari（包括所有 iOS/iPadOS WebView 环境）中无法播放，而 Android 和桌面端 Chrome/Firefox 则完全正常。这是因为 iOS WebKit 对 @#@#@#@#@#@#@#@#@#@0（WebAssembly 版本）在前端完成格式转换；或更优方案——在服务端 TTS 接口直接支持 WAV 输出格式（如 Azure Cognitive Services、AWS Polly 均提供 WAV 选项），避免客户端转换开销。

User Agent 检测虽实用，但非 100% 可靠（如某些 iOS 模拟器或 UA 伪造场景）。若需更高可靠性，可结合 navigator.platform 或特性检测（如尝试加载 MP3 blob 并监听 onerror），但对 TTS 场景，UA 检测已足够。

WAV 文件体积显著大于 MP3（无压缩），建议服务端输出时使用 PCM S16LE, 16kHz, mono 参数平衡音质与大小。

? 总结：跨平台 TTS 播放的关键在于「格式协商」而非「统一输出」。通过精准设备识别 + 格式动态切换，即可零成本解决 iOS 兼容问题，无需重构音频链路，是 React 移动端语音集成的标准实践。

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

const playAudio = async () => {
  if (props.currentA !== props.key) {
    props.setCurrentA(props.key);
    setLoading(true);

    try {
      const audioBase64 = await convertTextToVoice(props.text); // 返回 MP3 base64 字符串
      let audioSrc: string;

      // ✅ 可靠的 iOS 设备检测（覆盖 iPhone、iPad、iPod，排除旧版 IE/Edge）
      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

      if (isIOS) {
        // 调用转换函数：将 MP3 base64 → WAV base64（需后端或 WebAssembly 支持）
        // 示例：使用 ffmpeg.wasm（轻量、纯前端）或调用服务端转换 API
        const wavBase64 = await convertMp3ToWav(audioBase64);
        audioSrc = `data:audio/wav;base64,${wavBase64}`;
      } else {
        audioSrc = `data:audio/mp3;base64,${audioBase64}`;
      }

      setAudio(audioSrc);
      setPlaying(true);
    } catch (err) {
      console.error("TTS playback failed:", err);
      // 可选：降级提示或静音 fallback
    } finally {
      setLoading(false);
    }
  }
};