Angular+Firebase项目：Safari无法播放Firebase Storage音频求助

问题核心 #

你遇到的问题主要来自两个方面：

1. 使用了Firebase Storage控制台的预览URL（storage.cloud.google.com域名），该链接并非专为前端媒体播放设计，Safari对其跨源策略的校验比Chrome更严格；
2. CORS策略配置可能未生效或格式不正确。

解决方案 #

1. 替换为Firebase标准媒体访问URL

不要直接使用storage.cloud.google.com的预览链接，改用Firebase官方提供的媒体下载URL，格式为：

https://firebasestorage.googleapis.com/v0/b/[你的存储桶名]/o/[文件名]?alt=media

更可靠的方式是通过Firebase SDK动态获取下载URL（推荐，避免硬编码维护问题）：

import { getStorage, ref, getDownloadURL } from "firebase/storage";

// 组件内定义变量
audioUrl: string;
teacher: Audio;

// 初始化时获取音频URL
async ngOnInit() {
  const storage = getStorage();
  const audioRef = ref(storage, 'audiotest.m4a');
  this.audioUrl = await getDownloadURL(audioRef);
  this.teacher = new Audio(this.audioUrl);
}

play() {
  this.teacher.play();
  this.teacher.addEventListener("ended", () => {
    this.end = true;
  });
}

2. 正确配置存储桶CORS策略

你提到的"COOR"应为CORS，按以下步骤配置：

• 本地创建cors.json文件，内容可参考（按需调整origin为你的网站域名，而非通配符*）：

  [
    {
      "origin": ["https://your-angular-app-domain.com"],
      "method": ["GET"],
      "maxAgeSeconds": 3600,
      "responseHeader": ["Content-Type", "Access-Control-Allow-Origin"]
    }
  ]
  

• 使用Google Cloud的gsutil工具上传配置：

  gsutil cors set cors.json gs://your-bucket-name.appspot.com
  

  配置生效需要几分钟，完成后清除浏览器缓存再测试。

3. Safari兼容额外检查

• 确保音频/视频编码符合Safari要求：m4a需使用AAC编码，视频推荐H.264编码；
• 若仍有问题，可尝试在用户点击时动态创建Audio对象：

  play() {
    const audio = new Audio(this.audioUrl);
    audio.play();
    audio.addEventListener("ended", () => {
      this.end = true;
    });
  }
  

内容的提问来源于stack exchange，提问作者Deep Thought42