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

Question

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

如果您将我的Icecast 2.4.3服务器提供的MP3的网址直接放入Google Chrome中的网址栏，则无法播放。在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进行操作，以便在没有用户交互的情况下播放音频。但是对于this URL for the audio，它无法播放并抛出此错误：Uncaught (in promise) DOMException: The element has no supported sources.请尝试：https://jsfiddle.net/wo94xohr/2/它只能在Chrome中失败而不是Firefox或其他。

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

另外，如果你看一下响应标题，你会看到“Content-Range：bytes 0-0 / 0”......这是什么意思？

更新：我正在测试这是否是CORS（跨源资源共享）问题。我已将the 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

我认为问题出在您的信息流中。以下是另一个流媒体网址的略微修改示例：

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 no supported source was found

Answer 2

  

Chrome可能会播放标准为 BitRate 128,160的音频文件，   320,512，......

我不是百分之百关于此的具体细节，但是，它看起来像使用旧版Lame的一些MP3，或者长于几分钟，或者高（300 <）或低（128＆gt; =）比特率似乎受到影响。它似乎与webkit相关，因为它也影响Safari用户。

无论其！

作为一种解决方案，使用160Kbps比特率重新编码MP3文件，最新版本的LAME（3.99.5）似乎已经解决了这个问题，现在它们再次在所有主流浏览器中正常播放。 enter link description here