iOS 17中使用Blob URL播放音频失败问题求助

核心问题分析 #

iOS 17 对 Blob 对象的生命周期管理、资源加载校验做了调整，这是导致和旧版本 iOS 行为差异的主要原因：

• Blob 对象被提前垃圾回收，生成的 URL 直接失效
• 未明确指定音频 MIME 类型，iOS 17 对格式识别的要求更严格
• 跨域资源的缓存、权限校验逻辑和旧版不兼容

可行解决办法 #

1. 保留 Blob 全局引用，防止被回收 #

iOS 17 中如果没有保留 Blob 对象的全局引用，浏览器会提前释放资源，导致 URL 无法访问。

// 全局变量存 Blob 引用，避免被垃圾回收
let audioBlob = null;

async function loadAudio() {
  const res = await fetch('你的音频地址');
  audioBlob = await res.blob();
  const blobUrl = URL.createObjectURL(audioBlob);
  document.getElementById('audio-player').src = blobUrl;
}

// 播放结束后主动释放资源（可选）
document.getElementById('audio-player').addEventListener('ended', () => {
  URL.revokeObjectURL(this.src);
  audioBlob = null;
});

2. 显式指定音频 MIME 类型 #

创建 Blob 时明确标注音频格式，帮助 iOS 17 正确识别编码：

async function loadAudio() {
  const res = await fetch('你的音频地址');
  const arrayBuffer = await res.arrayBuffer();
  // 根据实际格式填 MIME 类型，比如 audio/mpeg（MP3）、audio/mp4（AAC）
  audioBlob = new Blob([arrayBuffer], { type: 'audio/mpeg' });
  const blobUrl = URL.createObjectURL(audioBlob);
  document.getElementById('audio-player').src = blobUrl;
}

3. 直接用响应流加载（大文件友好） #

对于大音频，无需转成 Blob 或 Base64，直接利用 fetch 响应的可读流：

async function loadAudio() {
  const res = await fetch('你的音频地址');
  const stream = res.body;
  if (stream) {
    const blobUrl = URL.createObjectURL(new Blob([stream]));
    document.getElementById('audio-player').src = blobUrl;
  }
}

4. 检查服务器配置 #

确保音频服务器返回正确的 CORS 头（Access-Control-Allow-Origin），同时避免设置过短的缓存有效期，iOS 17 对跨域资源的加载校验更严格。

关于 Base64 的问题 #

Base64 会让文件体积膨胀约 33%，大文件会触发 iOS 的内存限制，导致加载失败或播放卡顿，完全不适合大音频场景。

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