来自Icecast服务器的音频无法在Chrome中播放

Question

我无法获取由Icecast服务器提供的静态内容(mp3文件)以及使用HTML5在Google Chrome浏览器中播放.我们通过Icecast服务mp3的原因是政策:CPB要求它们"流式传输"而不是"下载",因为我们是公共广播.我们的现场音频流在Chrome中播放得很好.

如果您将我的Icecast 2.4.3服务器提供的MP3的URL直接放入谷歌浏览器的网址栏中,则无法播放.在Firefox,IE,Safari等中做同样的事情.它播放!试试吧:

https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3

(我使用的临时解决方案是Flash,但Chrome的最新更新(v60.0)默认情况下阻止Flash,"始终允许此网站"选项似乎不起作用,并且显示Flash的小图标被阻止的更加离散.请在此处尝试:http://kansaspublicradio.org/kpr-news/midwest-farmers-hope-boost-online-grocery-shopping)

我最好猜测为什么会发生这种情况是因为它与此有关:https://developers.google.com/web/updates/2016/03/play-returns-promise？hl = en

因此,我尝试重现他们的代码示例,其中他们使用HTML5 Media Capture来播放音频,而无需用户交互.但是有了这个音频的URL,它就无法播放并抛出这个错误:Uncaught (in promise) DOMException: The element has no supported sources.尝试一下:https://jsfiddle.net/wo94xohr/2/它只能在Chrome中失败而不是Firefox或其他.

我再次尝试但没有HTML5 Media Capture的东西.仍然没有骰子.试试吧:https://jsfiddle.net/yrhets74/

此外,如果你看一下响应标题,你会看到"内容范围:字节0-0/0"......这是否意味着什么？

---

更新:我正在测试这是否是CORS(跨源资源共享)问题.我已经将jsfiddle更新为:

var audioElement = document.querySelector('#music');
audioElement.crossOrigin = "anonymous"; // CORS access restriction. Worth a shot but no dice
audioElement.type = "audio/mpeg"; // just in case? idk
audioElement.src = "https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3";

function startPlayback() {
  // .play() is a Promise
  return audioElement.play().then(function(x){console.log('yay!')}, function(reason){
      console.log('Error: ' + reason);
  });
}
var playButton = document.querySelector('#play');
playButton.addEventListener('click', startPlayback);

它没有改变Chrome上的最终结果,但是在Firefox上它现在没有播放它会发出警告: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

您是否认为Icecast服务器需要将"Access-Control-Allow-Origin"标头设置为"允许"或其他内容？

以下是Icecast服务器的完整响应:

Request URL:https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3
Request Method:GET
Status Code:206 Partial Content
Remote Address:129.237.213.244:8001
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Accept-Ranges:bytes
Cache-Control:no-cache
Content-Length:526408
Content-Range:bytes 0-0/0
Content-Type:audio/mpeg
Date:Tue, 15 Aug 2017 19:34:23 GMT
Expires:Mon, 26 Jul 1997 05:00:00 GMT
Pragma:no-cache
Server:Icecast 2.4.3

Request Headers
view source
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8,ms;q=0.6
Cache-Control:no-cache
Connection:keep-alive
DNT:1
Host:streaming.kansaspublicradio.org:8001
Origin:https://fiddle.jshell.net
Pragma:no-cache
Range:bytes=0-
Referer:https://fiddle.jshell.net/_display/
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

---

更新2:我们已经将CORS标头添加Access-Control-Allow-Origin:*到icecast服务器的响应标头中,现在jsfiddle在Firefox中工作 - 没有CORS header ‘Access-Control-Allow-Origin’ missing警告.仍然不能在Chrome中播放:(

我还测试了WAV文件和M3U文件,两者都不会在Chrome中播放.Firefox可以播放wav文件(使用JSfiddle代码)但不能播放m3u文件

Answer 1

我认为问题出在你的直播上。下面是一个稍微修改过的示例，其中包含另一个流 URL：

audioElement.src = "http://novazz.ice.infomaniak.ch/novazz-128.mp3";

https://jsfiddle.net/yrhets74/5/

这适用于我的 Firefox 55 和 Chrome 60 机器。

VLC 告诉我使用的编解码器是 MPEG Audio 1/2 (mpga)。

关于CORS政策，您可能对这个问题感兴趣：DOMException: Failed to load because nosupported source was found