如何使用 HTML5 播放shoutcast/icecast 流?
是否可以使用 HTML5 播放shoutcast/icecast 流?
如果是这样,我应该如何实施?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
是否可以使用 HTML5 播放shoutcast/icecast 流?
如果是这样,我应该如何实施?
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
接受
或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论(8)
这应该可以正常工作,但请确保
/;
位于流 URL 和端口之后。如果您不需要自动播放,请删除“自动播放”标签。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.是的。但它只能在 Safari 中工作
,因为 Opera 和 Firefox 不支持非免费编解码器
Yes. But its only work in Safari
Cause Opera and Firefox did not support non free Codecs
请参阅此处:是否可以在互联网上播放shoutcast html5 的广播流?
see here: Is it possible to play shoutcast internet radio streams with html5?
关于
示例:
不工作:
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
我使用 Icecast 和 Easystream 来流式传输到 Mac 和 PC。脚本 设置名为 MP3 Sticky Player 的音频播放器。 swf
使用文档支持文件,播放器在这两种情况下都只需按如下方式加载。
PC
MAC
由于我们已经从任何 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
MAC
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.
在 Chrome 9x 上 如果您的网站通过 https 运行 您的shoutcast 流 url 链接必须是 https url,例如:
On Chrome 9x If your website works over https Your link for shoutcast stream url must be a https url, for example:
2020 更新
现代浏览器不需要任何特殊处理或服务器端解决方法来播放音频。只需使用音频标签,直接链接到一个或多个流源(不是播放列表):
来自 MDN:
浏览器支持
flac
、mp3
、vorbis
、aac
、opus
和.wav
.有关更多详细信息,请访问 caniuse.com。原始帖子
在 http 请求末尾添加分号。它是由shoutcast 制定的协议,用于覆盖其浏览器检测。像这样:
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):
From MDN:
Browsers support
flac
,mp3
,vorbis
,aac
,opus
andwav
. 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:
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 withMozilla/...
. 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.