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 对 <audio></audio> 元素加载 data:audio/mp3;base64,... 的支持存在限制——它拒绝解码或播放此类内联 MP3 流。
✅ 正确解决方案是：根据用户代理（User Agent）识别 iOS 设备，并对音频格式做运行时适配——iOS 使用 WAV，其余平台保留 MP3。WAV 是 iOS 唯一稳定支持的 base64 内联音频格式（前提是采样率、位深符合要求，通常 16-bit PCM、16kHz 即可）。
以下是优化后的 playAudio 实现（含关键注释和健壮性增强）：
根据项目规范生成 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);
}
}
};⚠️ 注意事项：
-
convertMp3ToWav不是浏览器原生 API，需自行实现：推荐使用@ffmpeg/ffmpeg（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 移动端语音集成的标准实践。
