来自Icecast服务器的音频不在Chrome中播放 [英] Audio from Icecast server not playing in Chrome

问题描述

我无法获得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在线购物）

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

<因此，我试图重现他们的代码示例，在这个示例中，他们使用HTML5媒体捕捉进行捣鼓，以便在没有用户交互的情况下播放音频。但是，如果这个音频网址，它无法播放并引发此错误： 未捕获（在承诺中）DOMException：该元素没有支持的源代码。尝试它： https://jsfiddle.net/wo94xohr/2/ 它只在Chrome中失败，而不在Firefox或其他。

我再次尝试，但没有HTML5媒体捕捉的东西。仍然没有骰子。尝试一下： https://jsfiddle.net/yrhets74/

另外，如果您查看响应标题，您会看到Content-Range：bytes 0-0 / 0......这是否意味着什么？

---

更新：我正在测试以查看这是否是CORS分享）问题。我已将 jsfiddle 更新到：

  var audioElement = document.querySelector（'＃music'）; 
 audioElement.crossOrigin =anonymous; // CORS访问限制。值得一拍，但没有骰子
 audioElement.type =audio / mpeg; // 以防万一？ idk 
 audioElement.src =https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3; 
 
函数startPlayback（）{
 // .play（）是一个Promise $ b $返回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上现在不播放，它会发出警告：跨源请求被阻止：同源策略不允许通过https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3读取远程资源。 （原因：缺少CORS头'Access-Control-Allow-Origin'）。

你认为Icecast服务器需要'Access- Control-Allow-Origin'标头设置为'allow'或者什么？

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

 请求URL：https：//streaming.kansaspublicradio.org：8001 / mp3 / First_0713886.mp3 
请求方法：GET 
状态码：206部分内容
远程地址：129.237.213.244：8001 
引荐策略：无引荐时降级
 
响应头
查看源
接受范围：bytes 
 Cache-Control：no-cache 
 Content-Length：526408 
 Content-Range：bytes 0-0 / 0 
 Content-Type：audio / mpeg 
日期：2017年8月15日星期二19:34:23 GMT 
过期时间：1997年7月26日星期一05:00:00 GMT 
 Pragma：no-cache 
服务器：Icecast 2.4.3 
 
请求标题
查看源
接受：* / * 
 Accept-Encoding：identity; q = 1，*; q = 0 
 Accept-语言：en-US，en; q = 0.8，ms; q = 0.6 
 Ca che-Control：no-cache 
连接：keep-alive 
 DNT：1 
主机：streaming.kansaspublicradio.org：8001 
原产地：https：//fiddle.jshell。 net 
 Pragma：no-cache 
范围：bytes = 0- 
 Referer：https：//fiddle.jshell.net/_display/ 
 User-Agent：Mozilla / 5.0（ Windows NT 6.1; Win64平台; x64）AppleWebKit / 537.36（KHTML，如Gecko）Chrome / 60.0.3112.90 Safari / 537.36 
  

---

更新2：我们已将CORS标头 Access-Control-Allow-Origin：* 添加到icecast服务器的响应头文件，现在jsfiddle在Firefox中工作 - 没有 CORS头文件'Access-Control-Allow-Origin'缺少警告。尽管如此，Chrome仍然无法播放：（b / b）

我也测试过WAV文件和M3U文件，并且都不会在Chrome中播放，Firefox可以播放wav文件（使用JSfiddle代码），但没有m3u文件

解决方案

我认为问题出在您的流上。 ：

  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：F因为没有找到支持的来源而被加载加载

I'm having trouble getting static content (mp3 files) served by an Icecast server to play in Google Chrome browser with HTML5. The reason we're serving the mp3s via Icecast is policy: the CPB requires they be "streamed" and not "downloaded" since we're public radio. Our live audio streams play just fine in Chrome.

If you put the URL for an MP3 served by my Icecast 2.4.3 server straight into the URL bar in google Chrome, it does not play. Do the same thing in Firefox, IE, Safari, etc.. it plays! Try it:

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

(The temporary solution I'm using is Flash but the latest update to Chrome (v60.0) makes Flash blocked by default, the "Always allow for this website" option does not seem to be working, and the little icon showing that Flash is blocked is much more discrete. Try it here: http://kansaspublicradio.org/kpr-news/midwest-farmers-hope-boost-online-grocery-shopping )

My best guess as to why this is happening is that it has something to do with this: https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en

So I tried to reproduce their code example, in which they monkey with HTML5 Media Capture to get audio to play without user interaction. But with this URL for the audio, it fails to play and throws this error: Uncaught (in promise) DOMException: The element has no supported sources. Try it: https://jsfiddle.net/wo94xohr/2/ It only fails in Chrome and not Firefox or others.

I tried again but without the HTML5 Media Capture stuff. Still no dice. Try it: https://jsfiddle.net/yrhets74/

Also, if you look at the response headers, you see "Content-Range:bytes 0-0/0"... could this mean something?

---

UPDATE: I'm testing to see if this is a CORS (cross origin resource sharing) issue. I've updated the jsfiddle to:

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);

It hasn't changed the end result on Chrome, but on Firefox it doesn't play now and it gives the warning: 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).

Do you think the Icecast server needs the 'Access-Control-Allow-Origin' header set to 'allow' or something?

Here's the full response from the Icecast server:

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

---

UPDATE 2: We've added the CORS header Access-Control-Allow-Origin:* to the icecast server's response headers and now the jsfiddle works in Firefox - no CORS header ‘Access-Control-Allow-Origin’ missing warning. Still does not play in Chrome though :(

I also tested WAV files and M3U files and neither will play in Chrome. Firefox could play the wav file (with the JSfiddle code) but no the m3u file

解决方案

I think the issue is with your stream. Here is a slightly modified example with another streaming URL:

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

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

This works on my machine with Firefox 55 and Chrome 60.

VLC tells me the codec used is MPEG Audio 1/2 (mpga).

Regarding the CORS policy, you may be interested in this question: DOMException: Failed to load because no supported source was found

这篇关于来自Icecast服务器的音频不在Chrome中播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！