31

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

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

4

8 回答 8

49

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>
于 2010-07-06T00:11:07.953 回答
18

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

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

  • 原生 SHOUTcast “ICY”协议流式音频响应。如果访问流的播放器包含标头，则它决定执行此操作icy-metadata: 1。

  • 用于不支持 ICY 的媒体播放器的纯 HTTP 流式音频响应，没有额外的元数据。

  • “SHOUTcast DNAS 状态”页面和 Web 界面上的其他页面。

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

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

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

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

于 2010-04-30T09:39:50.830 回答
4 
<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>

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

于 2013-05-19T18:26:15.703 回答
3

是的。但它只适用于 Safari

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

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

于 2010-04-30T08:52:31.427 回答
3

看这里：是否可以使用 html5 播放广播网络广播流？

于 2010-04-30T08:57:31.787 回答
0

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

例子：

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

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

于 2017-05-13T15:12:29.660 回答
0

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

个人电脑

<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>

苹果电脑

<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 才能正确运行）并为每个播放器歌曲流匹配一个封面艺术目录。

于 2018-10-25T19:24:43.193 回答
0

在 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>
于 2022-01-13T08:15:38.123 回答