如何使用 HTML5 播放shoutcast/icecast 流?

发布于 2024-08-31 01:10:36 字数 65 浏览 8 评论 0 原文

是否可以使用 HTML5 播放shoutcast/icecast 流?

如果是这样,我应该如何实施?

Is it possible to play a shoutcast/icecast stream using HTML5?

If so, how should I implement it?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

双马尾 2024-09-07 01:10:37
<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>

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

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

This should work fine, but make sure /; is there after the stream URL and port. If you don't need autoplay, remove the "autoplay" tag.

深海少女心 2024-09-07 01:10:37

是的。但它只能在 Safari 中工作

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

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

Yes. But its only work in Safari

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

Cause Opera and Firefox did not support non free Codecs

残龙傲雪 2024-09-07 01:10:37

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

示例:

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

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

On redirecting problems with <audio> tag in Browsers try to add "/stream" at the end of the stream URL for preventing redirecting.

example:

not working:
http://live-radio01.xxxxxx.com/2TJW/mp3

working:
http://live-radio01.xxxxxx.com/2TJW/mp3/stream

不必在意 2024-09-07 01:10:37

我使用 Icecast 和 Easystream 来流式传输到 Mac 和 PC。脚本 设置名为 MP3 Sticky Player 的音频播放器。 swf
使用文档支持文件,播放器在这两种情况下都只需按如下方式加载。

PC

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

I use Icecast with Easystream for streaming to both mac and pc. A Script Sets up the audio player called MP3 Sticky Player. swf
With the documentation support files the player just loads as below in both cases.

PC

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

As we have removed images from any mp3 metadata we use a image loader that grabs the Icy-MetaData (FYI you will need at least PHP 5.4 to run correctly) and matches a directory of cover art for each players song that streams.

尸血腥色 2024-09-07 01:10:37

在 Chrome 9x 上 如果您的网站通过 https 运行 您的shoutcast 流 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>

On Chrome 9x If your website works over https Your link for shoutcast stream url must be a https url, for example:

<audio controls src='https://ssl-1.radiohost.pl:7028/stream' type='audio/mpeg' align='cemnter'>
                     Your browser does not support the audio element.
    </audio>
黑白记忆 2024-09-07 01:10:36

2020 更新

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

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

来自 MDN

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

浏览器支持 flacmp3vorbisaacopus .wav.有关更多详细信息,请访问 caniuse.com

原始帖子

在 http 请求末尾添加分号。它是由shoutcast 制定的协议,用于覆盖其浏览器检测。像这样:

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

2020 update

Modern browsers don't need any special treatment or server-side workarounds to play audio. Simply use an audio tag with a direct link to one or more stream sources (not a playlist):

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

From MDN:

The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.

Browsers support flac, mp3, vorbis, aac, opus and wav. More details on caniuse.com.

Original post

Add a semicolon to the end of the http request. It IS the protocol set forth by shoutcast to override it's browser detection. Like this:

<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
﹏半生如梦愿梦如真 2024-09-07 01:10:36

SHOUTcast 有一个大问题,我怀疑这是导致它无法在本应支持 MP3 的 Chrome 中运行的原因。

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

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

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

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

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

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

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

所以您可能需要添加一个 Flash 音频播放器作为后备。

There is a big problem with SHOUTcast, which I suspect is responsible for it not working even in Chrome which is supposed to support MP3.

SHOUTcast can serve three different types of response:

  • a native-SHOUTcast “ICY” protocol streaming audio response. It decides to do this if the player accessing the stream includes an icy-metadata: 1 header.

  • a plain-HTTP streaming audio response, without extra metadata, for media players with no ICY support.

  • the “SHOUTcast D.N.A.S. Status” page and other pages on the web interface.

How does it decide whether to serve a web page instead of an audio stream? It guesses whether you're using a web browser. By looking to see whether the User-Agent header starts with Mozilla/.... Because all web browsers are Mozilla, right? Jeez, SHOUTcast.

So when Chrome tries to fetch the audio stream to play, SHOUTcast thinks it's a web browser (well... it is) and refuses to give it the audio stream to put in the audio tag. Instead it gets the admin web page.

(I would guess Safari is passing the icy-metadata header to avoid the problem, having specific support for SHOUTcast. I can't test it at the moment as Safari won't play audio or video. Maybe it wants me to install QuickTime for that. Maybe it can go get stuffed.)

So you'll probably need to add a Flash audio player as fallback.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文