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

Question

我无法获取由Icecast服务器提供的带有HTML5的Google Chrome浏览器中播放的静态内容（mp3文件）。我们通过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），闪光阻止默认情况下，“总是允许该网站”选项不似乎是工作，并显示出闪光被遮挡的小图标更加离散这里试一试：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

所以我试图重现他们的代码示例，其中y猴子与HTML5媒体捕捉，让音频播放没有用户交互。但与this URL for the audio，它无法播放并引发此错误：Uncaught (in promise) DOMException: The element has no supported sources.尝试它：https://jsfiddle.net/wo94xohr/2/它只在Chrome中失败，不在Firefox或其他。

我再次尝试，但没有HTML5媒体捕捉的东西。仍然没有骰子。试试看：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'标头设置为'allow'或其他东西？

下面是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服务的响应头，现在在Firefox中的jsfiddle作品 - 没有CORS header ‘Access-Control-Allow-Origin’ missing警告。仍然没有在Chrome中播放，虽然:(

我还测试WAV文件和M3U文件，也不会在Chrome中播放。火狐可以发挥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音频1/2（mpga）。

关于CORS的政策，你可能有兴趣在这个问题：DOMException: Failed to load because no supported source was found

Answer 2

Chrome is likely to play audio files with standards BitRate 128 , 160 , 320 , 512 , ...

我不是这个细节100％，但是，它看起来像使用旧版本瘸一些MP3，或长于几分钟，或高（300 <）或低（128> =）比特率似乎受到影响。它似乎与webkit相关，因为它也会影响Safari用户。

不过！

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