如何将Shoutcast直播流接入网站解决Chrome混合内容拦截播放问题

Chrome 90及以上版本默认强制将页面内所有HTTP协议的音视频资源自动升级为HTTPS请求，如果对应资源的服务端不支持HTTPS，请求直接失败，不会回退到HTTP连接。你接入的Shoutcast流8020端口未配置SSL证书，根本不响应HTTPS请求，所以就算手动把src改成HTTPS也连不上。Firefox目前对音频类混合内容暂未做强制拦截，所以还能正常播放，后续版本收紧规则后也会失效。

• 方案1：配置同域反向代理（最稳定，推荐正式站点使用）
  如果你自己的站点已经部署了HTTPS，直接在站点所用的Web服务（Nginx、Apache、Caddy都支持）上新增反向代理规则：将站点下某一路径（比如/live-audio/）的请求转发到目标HTTP流地址http://djefo.lightmanstreams.com:8020/。配置完成后，音频资源和你的站点同协议、同域名，完全不会触发混合内容拦截，所有浏览器都能正常播放。
  替换后的音频代码如下：

  <audio
    controls
    src="/live-audio/;"
    type="audio/mpeg"
  ></audio>
  

  配置提醒：反向代理需要关闭响应缓冲，否则直播流会出现数十秒的延迟，同时要确保正确返回audio/mpeg的MIME类型。
• 方案2：向流服务商索要HTTPS播放地址
  联系给你提供Shoutcast服务的厂商，确认是否支持SSL加密的流地址，一般正规服务商会提供配置好证书的443端口专属播放地址，拿到后直接替换audio标签的src即可。注意不要自己强行把HTTP地址改成HTTPS，没有证书的端口不会响应HTTPS请求。
• 方案3：仅本地调试用的临时方案（禁止用于公开站点）
  本地测试时可以点击Chrome地址栏左侧的站点权限按钮，找到「不安全内容」选项设置为允许，即可临时加载HTTP流。但这个设置只对本地浏览器生效，普通访客不会手动修改这个配置，完全不适合对外的正式站点。

注意：不要尝试通过修改CSP规则、给标签加特殊属性的方式绕过混合内容拦截，Chrome当前版本的混合内容拦截是内核强制策略，前端代码层面没有绕过可能。

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