Html 如何使用 HTML5 播放shoutcast/icecast 流？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2743279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How could I play a shoutcast/icecast stream using HTML5?
提问by Cy.
Is it possible to play a shoutcast/icecast stream using HTML5?
是否可以使用 HTML5 播放喊叫/冰播流？
If so, how should I implement it?
如果是这样，我应该如何实施它？
回答by Nate Sweet
2020 update
2020年更新
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 (nota playlist):
现代浏览器不需要任何特殊处理或服务器端解决方法来播放音频。只需使用带有一个或多个流源（不是播放列表）的直接链接的音频标签：
<audio>
<source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>
From MDN:
来自MDN：
The HTML
<audio>elementis used to embed sound content in documents. It may contain one or more audio sources, represented using thesrcattribute or the<source>element: the browser will choose the most suitable one.
该HTML
<audio>元素用于在文档中嵌入的声音内容。它可能包含一个或多个音频源，使用src属性或<source>元素表示：浏览器将选择最合适的一个。
Browsers support flac, mp3, vorbis, aac, opusand wav. More details on caniuse.com.
浏览器的支持flac，mp3，vorbis，aac，opus和wav。有关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:
在 http 请求的末尾添加分号。这是 Shotcast 提出的协议，用于覆盖其浏览器检测。像这样：
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
回答by bobince
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 有一个大问题，我怀疑是它在应该支持 MP3 的 Chrome 中无法正常工作的原因。
SHOUTcast can serve three different types of response:
SHOUTcast 可以提供三种不同类型的响应：
a native-SHOUTcast “ICY” protocol streaming audio response. It decides to do this if the player accessing the stream includes an
icy-metadata: 1header.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.
本地 SHOUTcast “ICY”协议流式音频响应。如果访问流的播放器包含
icy-metadata: 1标头，则它决定执行此操作。无额外元数据的纯 HTTP 流音频响应，适用于不支持 ICY 的媒体播放器。
“SHOUTcast DNAS 状态”页面和 Web 界面上的其他页面。
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-Agentheader starts with Mozilla/.... Because all web browsers are Mozilla, right? Jeez, SHOUTcast.
它如何决定是否提供网页而不是音频流？它会猜测您是否正在使用网络浏览器。通过查看User-Agent标题是否以Mozilla/.... 因为所有的网络浏览器都是 Mozilla，对吧？天哪，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.
因此，当 Chrome 尝试获取要播放的音频流时，SHOUTcast 认为它是一个网络浏览器（嗯……确实如此）并拒绝为其提供音频流以放入音频标签中。相反，它获取管理网页。
(I would guess Safari is passing the icy-metadataheader 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.)
（我猜 Safari 正在传递icy-metadata标头以避免该问题，对 SHOUTcast 有特定支持。我目前无法测试它，因为 Safari 不会播放音频或视频。也许它想让我为此安装 QuickTime。也许它可能会被塞满。）
So you'll probably need to add a Flash audio player as fallback.
因此，您可能需要添加一个 Flash 音频播放器作为后备。
回答by Ruwan Harshana Peiris
<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.
这应该可以正常工作，但请确保/;在流 URL 和端口之后存在。如果您不需要自动播放，请删除“自动播放”标签。
回答by classless
Yes. But its only work in Safari
是的。但它只适用于 Safari
<!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>
Cause Opera and Firefox did not support non free Codecs
原因 Opera 和 Firefox 不支持非免费编解码器
回答by Werewolve
回答by DanielBLN
On redirecting problems with <audio> tag in Browsers try to add "/stream" at the end of the stream URL for preventing redirecting.
<audio在浏览器中使用> 标签重定向问题时，尝试在流 URL 的末尾添加“/stream”以防止重定向。
example:
例子：
not working: http://live-radio01.xxxxxx.com/2TJW/mp3
不工作：http: //live-radio01.xxxxxx.com/2TJW/mp3
回答by MPG
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.
我使用 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>
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.
由于我们已经从任何 mp3 元数据中删除了图像，我们使用图像加载器来抓取 Icy-MetaData（仅供参考，您至少需要 PHP 5.4 才能正确运行）并为每个播放的播放器歌曲匹配封面艺术目录。
