我無法獲取由Icecast服務器提供的帶有HTML5的Google Chrome瀏覽器中播放的靜態內容（mp3文件）。我們通過Icecast提供mp3的原因是政策：CPB要求它們是「流媒體」而不是「下載」的，因爲我們是公共廣播電臺。我們的現場音頻流在Chrome中運行得很好。來自Icecast服務器的音頻未在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文件
你應該知道，有「流」和「下載」沒有什麼區別，你的這種限制的實施將沒有安全或預防以任何方式下載的意識。斷言用Icecast靜態地提供這些東西與其他任何Web服務器都是不同的。對於我所使用的其他CPB電臺，客戶端流媒體與下載的區別是要求的關鍵。一些基本的限制（例如帶有過期日期的簽名URL）在展示盡力而爲安全性方面走了很長的路。 – Brad
謝謝@Brad，你當然是對的。如果您將MP3的URL直接放入瀏覽器的地址欄中，請按Enter鍵，然後按Ctrl + s，即可下載mp3並保存到本機。但是爲什麼它的行爲與apache提供的mp3不同？ *嘆息* –
@DanMantyla你有沒有在這裏看到答案bobince？值得一槍https://stackoverflow.com/questions/2743279/how-could-i-play-a-shoutcast-icecast-stream-using-html5 –