如何使用 HTML5 播放直播/冰播流？答案

【问题标题】：How could I play a shoutcast/icecast stream using HTML5?如何使用 HTML5 播放直播/冰播流？
【发布时间】：2011-02-14 03:45:31
【问题描述】：

是否可以使用 HTML5 播放直播/冰播流？

如果是这样，我应该如何实现它？

【问题讨论】：

标签： html streaming audio-streaming shoutcast icecast

【解决方案1】：

在 Chrome 9x 上如果您的网站通过 https 运行您的直播流 url 链接必须是 https url，例如：

<audio controls src='https://ssl-1.radiohost.pl:7028/stream' type='audio/mpeg' align='cemnter'>
                     Your browser does not support the audio element.
    </audio>

【讨论】：

【解决方案2】：

2020 年更新

现代浏览器不需要任何特殊处理或服务器端解决方法来播放音频。只需使用带有直接链接到一个或多个流源（不是播放列表）的音频标签：

<audio>
    <source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>

来自MDN：

HTML <audio> 元素 用于在文档中嵌入声音内容。它可能包含一个或多个音频源，使用src 属性或<source> 元素表示：浏览器将选择最合适的一个。

浏览器支持flac、mp3、vorbis、aac、opus和wav。更多详情请关注caniuse.com。

原帖

在 http 请求的末尾添加分号。它是由shoutcast 提出的覆盖它的浏览器检测的协议。像这样：

<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>

【讨论】：

看来，现在（2020 年）音频元素无需任何调整即可处理 mp3 流。

【解决方案3】：

我将 Icecast 与 Easystream 一起用于流式传输到 mac 和 pc。脚本设置名为 MP3 Sticky Player 的音频播放器。瑞士法郎使用文档支持文件，播放器在两种情况下都加载如下。

电脑

<ul id="playlist" style="display:none;">
        <li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
    </li>
</ul>

MAC

<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
            Your browser does not support the <code>audio</code> element.
</audio>

由于我们从任何 mp3 元数据中删除了图像，我们使用了一个图像加载器来获取 Icy-MetaData（仅供参考，您至少需要 PHP 5.4 才能正确运行）并为每个播放器歌曲流匹配一个封面艺术目录。

【讨论】：

【解决方案4】：

关于浏览器中<audio> 标记的重定向问题，请尝试在流 URL 的末尾添加“/stream”以防止重定向。

示例：

不工作： http://live-radio01.xxxxxx.com/2TJW/mp3

工作： http://live-radio01.xxxxxx.com/2TJW/mp3/stream

【讨论】：

【解决方案5】：

<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>

这应该可以正常工作，但请确保/; 在流 URL 和端口之后。如果您不需要自动播放，请删除 “自动播放” 标签。

【讨论】：

我稍微编辑了你的帖子，当你在 Stack Overflow 上发帖时，请尽量使用正确的语法。除此之外，干得好！
为什么需要/;？

【解决方案6】：

SHOUTcast 存在一个大问题，我怀疑这是导致即使在应该支持 MP3 的 Chrome 中也无法正常工作的原因。

SHOUTcast 可以提供三种不同类型的响应：

原生 SHOUTcast “ICY”协议流式音频响应。如果访问流的播放器包含icy-metadata: 1 标头，则它决定执行此操作。
纯 HTTP 流式音频响应，没有额外的元数据，适用于不支持 ICY 的媒体播放器。
“SHOUTcast D.N.A.S.状态”页面和网页界面上的其他页面。

它如何决定是否提供网页而不是音频流？它会猜测您是否使用网络浏览器。通过查看User-Agent 标头是否以Mozilla/... 开头。因为所有的网络浏览器都是 Mozilla，对吧？天哪，SHOUTcast。

因此，当 Chrome 尝试获取要播放的音频流时，SHOUTcast 认为它是一个网络浏览器（嗯……确实如此）并拒绝将音频流放入音频标签中。相反，它会获取管理网页。

（我猜 Safari 正在传递 icy-metadata 标头以避免该问题，对 SHOUTcast 具有特定支持。我目前无法测试它，因为 Safari 不会播放音频或视频。也许它希望我为此安装 QuickTime。也许它会被塞满。）

因此，您可能需要添加 Flash 音频播放器作为后备。

【讨论】：

非常感谢您不仅说它不起作用而且还解释了原因！

【解决方案7】：

请看这里：Is it possible to play shoutcast internet radio streams with html5?

【讨论】：

【解决方案8】：

是的。但它只适用于 Safari

    <!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>

因为 Opera 和 Firefox 不支持非免费编解码器

【讨论】：