在线广播收听网站桌面端播放按钮失效问题技术问询

核心原因分析 #

• 混合内容安全限制
  你的站点域名是https://www.myhomepage.com（HTTPS协议），但所有音频源地址都是HTTP协议。桌面端主流浏览器（Chrome、Edge、Firefox等）默认开启混合内容拦截，禁止HTTPS站点加载HTTP的非安全资源，所以audio标签无法正常加载流资源，播放按钮直接置灰不可用。移动端浏览器对该限制的执行标准更宽松，因此可以正常播放。
• MIME类型配置错误且冗余
  你为同一个音频流地址配置了11种不同的MIME类型，存在两个明显问题：

1. 存在拼写错误：audio/acc应为audio/aac，错误的MIME类型会直接导致浏览器解析失败
2. 冗余的MIME类型会让桌面端浏览器优先匹配到自身不支持的类型后直接终止加载，不会继续遍历后续的source标签，而移动端浏览器的解析逻辑容错性更高，会跳过不支持的类型找到可播放的配置

• CORS跨域校验限制
  音频流所在的yayin.asymedya.com域名和你的站点域名不一致，属于跨域请求。桌面端浏览器对音频资源的跨域校验更严格，如果音频流服务器没有配置正确的Access-Control-Allow-Origin响应头允许你的站点访问，请求会被直接拦截。移动端部分浏览器对直播流的跨域校验规则更宽松，因此可以正常加载。
• 原生audio标签对流媒体的兼容性差异
  你使用的是Icecast/Shoutcast类的直播流媒体，部分桌面端浏览器原生audio标签对该类直播流的兼容性弱于移动端，搭配错误的MIME类型配置后更容易出现加载失败的问题。

修复方案 #

1. 优先将音频流地址升级为HTTPS协议，测试阶段可临时调整桌面端浏览器的混合内容限制验证问题，该方案仅适用于测试，不可用于正式环境面向普通用户
2. 清理冗余的source标签，仅保留适配主流浏览器的类型即可，参考配置如下：

<audio controls preload="auto" style="width: 100%;">
    <source src="https://yayin.asymedya.com:8020/;" type="audio/mpeg">
    <source src="https://yayin.asymedya.com:8020/;" type="audio/ogg">
</audio>

3. 联系音频流服务商配置CORS响应头，允许你的站点域名跨域访问
4. 如果仍有兼容性问题，可以引入专门的流媒体播放库替代原生audio标签，提升桌面端兼容性。

内容的提问来源于stack exchange，提问作者Fatih Aslandag