是否可以使用 html5 播放广播网络广播流？

Posted 2023-03-14

技术标签:

【中文标题】是否可以使用 html5 播放广播网络广播流？【英文标题】：Is it possible to play shoutcast internet radio streams with html5? 【发布时间】：2011-01-14 19:21:50 【问题描述】：

是否可以使用 html5 播放广播（或某些）互联网广播流？

所以我有下一个代码：

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

我将其保存为 HTML 页面并启动我的浏览器（Google chrome 4.0.249.78、safary 或 FF）

但它不能播放/工作！(

而且它不能与我尝试播放的任何其他网络收音机一起播放！（

为什么！？！我做错了什么？

顺便说一句：来自HTML5 (including next generation additions still in development) 2.6.1 Protocol concepts 用户代理可以实现多种传输协议，但该规范主要以 HTTP 的形式定义行为。 [HTTP]

HTTP GET 方法等价于协议的默认检索动作。例如，FTP 中的 RETR。在 HTTP 术语中，此类操作是幂等且安全的。

HTTP 响应码等价于其他协议中的状态，具有相同的基本含义。例如，“找不到文件”错误相当于 404 代码，服务器错误相当于 5xx 代码，等等。

HTTP 标头等效于其他协议中具有相同基本含义的字段。例如，HTTP 身份验证标头等效于 FTP 协议的身份验证方面。

【问题讨论】：

在这里您可以找到一些您可以使用的附加信息和链接：vorbis.com/music_links> 和这个问题有点关系：***.com/questions/17014317/… 【参考方案1】：

在http 请求的末尾添加一个分号。它是由shoutcast 制定的覆盖其浏览器检测的协议。像这个例子：

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

【讨论】：

这适用于我为学校在线广播电台制作的网站。他们使用快捷方式广播 mpeg 流。无需 javascript 实际上，对我来说，分号会引发 404（未找到文件）。我刚刚打开了 icecast 管理界面，从中可以找到并打开流挂载点，并将 HTML 元素（它是视频，但音频也可以）复制到我的前端。摇滚乐:) 出现“额外分号”是 URL 的一部分，有时添加“;stream/1”也很有帮助（尽管有时您可能根本不需要分号？），参考：@ 987654321@【参考方案2】：

HTML5 没有指定播放器必须支持的音频格式（无论是渐进式还是流式）。这取决于浏览器根据需求和实施可行性来确定。在早期的草稿中，我们尝试指定所有浏览器必须支持的一些基线编解码器和格式，但每种可能的格式都导致一些浏览器供应商拒绝实施。

以下内容似乎在 Safari（4.0.4、WebKit nightly 6531.21.10、r54538、Mac OS X 10.6.2）中有效，但在 Chrome 或 Firefox 中无效：

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

（注意<audio>在HTML序列化中需要一个结束标签，它不能使用XML风格的自闭合标签，我需要包含controls或autoplay才能真正开始音频)

这可能是因为 Safari “免费”获得了对 Shoutcast 的支持，因为它只使用 QuickTime 来处理它提供的任何音频和视频 URL，而且 QuickTime 已经支持 Shoutcast。这也可能导致一些奇怪的错误，因为 QuickTime 的 HTTP 实现是，好吧，quirky，说得客气一点。

我建议在不支持 Shoutcast 的浏览器中提交错误，要求其支持。以下是 Firefox (Gecko/Mozilla)、Chrome (Chromium) 和 Safari 的错误跟踪器（如果它碰巧在 Windows 上不起作用，或类似的东西）。

【讨论】：

我认为它没有指定支持哪些流媒体格式？或者你会说如果它支持音频编解码器，它通常“将”支持这种格式的流媒体？【参考方案3】：

你不能使用 ShoutCast 来做到这一点，但使用 Icecast 和 edcast 客户端你可以通过 HTML5 <audio> 标签流式传输实时 vorbis。只需将其指向http://your-url.com:port/stream.ogg：p

【讨论】：

你知道ogg有什么电台直播吗？ @Blender，OGG 有大量的电台广播！ dir.xiph.org/by_format/Ogg_Vorbis【参考方案4】：

我已经检查了 ogg_vorbis 电台。我下载了一些播放列表并在记事本中打开它，然后复制了一个流的 url。因此，如果您想对其进行测试，只需将其复制到空文件并将其命名为 something.html。

<!DOCTYPE html>
    <html>
    <head>
    <title>audio testing live stream!</title>
    </head>
    <body>
    <audio controls="controls" autoplay="autoplay" src="http://oggvorbis.tb-stream.net:80/technobase.ogg">
    </audio>
    </body>
</html>

就是这样！

【讨论】：

【参考方案5】：

<!DOCTYPE html>
<audio controls src="http://baldyradio.com:8010/;"></audio>

这在IE9的发布版本中有效，遗憾的是不能对FireFox 4说同样的话！

【讨论】：

【参考方案6】：

<audio controls src="http://example.com:8000/mountpath;"></audio>

【讨论】：

【参考方案7】：

阅读 HTML 5 音频规范 (http://www.w3schools.com/html5/html5_audio.asp) W3C 概述了哪些浏览器支持哪些格式（MP3 或 OGG）

我要做的是让一个 Icecast 服务器（不是 ShoutCast）流式传输 MP3 和 OGG 流

使用 javascript 检测浏览器类型 - http://www.javascripter.net/faq/browsern.htm

if（浏览器不支持 HTML5）打印消息 - 使用新浏览器

if（浏览器支持 HTML5 和 OGG 流（使用 W3c 的列表））在 SRC 标签中使用来自 icecast 服务器的 OGG 流

if（浏览器支持 HTML5 MP3 流媒体（使用 W3C 的列表））在 SRC 标签中使用来自 icecast 服务器的 MP3 流

我认为这将涵盖所有主要浏览器并解决大多数人的问题随着更多浏览器的支持，您将来可能会发现这将是多余的

【讨论】：

支持浏览器检测和 W3C 支持矩阵是通向疯狂的道路。有一种编程方式来检测流支持。 Soundcloud 使用它，他们创建了这个 areweplayingyet.org 你可以检查 github 上的代码，看看他们是如何做到的。在讨论规格时请DO NOT 链接到 w3schools。该站点与 w3c 的连接为零（除了 w3c 人可能讨厌他们）。它还包含许多过时、错误或不安全的信息。【参考方案8】：

上面的帖子给出了正确的答案，尽管他们没有提到使用斜线。确保 /; 在流 URL 和端口之后。

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

【讨论】：

【参考方案9】：

好吧，Firefox 和 Opera 不支持非免费编解码器，例如 mp3（与 Opera 10.5 alpha 一样，FF 3.5 及更高版本仅支持音频的 PCM wav 和 Ogg Vorbis）。不过，我相信 Chrome 和 Safari 确实支持 MP3。

下一个问题是您的 URL 似乎指向描述流的网页，而不是流。

最后，据我所知，没有人为音频元素实现播放列表解析器（规范只提到音频文件，而不是播放列表），这是一个问题，即使你点击“收听”你也会得到播放列表而不是原始流。

【讨论】：

这里有很多“网络广播”一词（在规范中）whatwg.org/specs/web-apps/current-work/multipage/…【参考方案10】：

是的，你可以玩 ShoutCast2 我就是这样用的

<audio preload="none" autoplay="autoplay" controls="controls">
    <source src="http://178.32.62.172:9079/stream" type="audio/mpeg">
    Your browser does not support this player, please update the version
</audio>

【讨论】：

以上是关于是否可以使用 html5 播放广播网络广播流？的主要内容，如果未能解决你的问题，请参考以下文章

节点（套接字）实时音频流/广播

为 HTML5 从设备中的线路创建实时音频流

播放广播流时如何设置 AVPLayer 的音量

如何在android中播放在线广播

如何在 Android 中播放在线广播流 url。如何在 android 中播放 .pls 广播流 url

从 URL React Native 录制音频（广播流）