Question

<script>
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'http://subdomain.domain.org:port/;stream/1';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
audio.crossorigin="anonymous";
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
    document.getElementById('audio_box').appendChild(audio);
    context = new (window.AudioContext || window.webkitAudioContext)(); // AudioContext object instance // AudioContext object instance
    analyser = context.createAnalyser(); // AnalyserNode method
    canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    // Re-route audio playback into the processing graph of the AudioContext
    source = context.createMediaElementSource(audio);
 source.crossOrigin = 'anonymous'   
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
    (requestAnimationFrame || webkitRequestAnimationFrame)(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);//get frequency

    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = '#00CCFF'; // Color of the bars
    bars = 100;
    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(fbc_array[i] / 2);
        //  fillRect( x, y, width, height ) // Explanation of the parameters below
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}
</script>

音频API为 MediaElementAudioSource输出由于CORS访问限制而导致的零，因为我正在尝试播放SHOUTcast网址。我不知道该怎么办;我在互联网上尝试过所有解决方案但没有任何效果。任何帮助将不胜感激。

这个URL与音频元素完美配合，所以它与URL无关;我甚至试过像http://subdomain.domain.org:port/file.mp3这样的东西。我在互联网上发现使用Icecast的人.ogg有同样的问题。如何解决这个问题？

Answer 1

在我的回答中，我将假设以下设置：

您的信息流网址为http://stream.radio.com:8000/mount（或Shoutcast为http://stream.radio.com:8000/;stream/1）
您放置HTML / JS代码网址的网页网址是http://radio.com/player

要实现这一目标，您需要：

将您的信息流的“Access-Control-Allow-Origin”标题设置为您的域或*
在javascript中，将audio代码crossOrigin属性设置为“匿名”audio.crossOrigin="anonymous";
使用反向代理将您的URL移动到原始域的另一个选项。

使用 Icecast ，您可以使用配置文件设置“Access-Control-Allow-Origin”标头，只需将以下行添加到icecast.xml中，我通常会在打开后立即添加它们{ {1}}标记：

<icecast>

不要忘记在这些更改后重新启动Icecast。当您的Icecast重新联机时，您可以使用以下命令检查标题：

<http-headers>
        <header name="Access-Control-Allow-Origin" value="*" />
        <header name="Access-Control-Allow-Headers" value="Origin, Accept, X-Requested-With, Content-Type, If-Modified-Since" />
        <header name="Access-Control-Allow-Methods" value="GET, OPTIONS, HEAD" />
</http-headers>

响应应该如下所示：

lynx -head -dump http://stream.radio.com:8000/mount

如您所见，“Access-Control-Allow-Origin：*”标题存在。

<强> Shoutcast的

不幸的是，Shoutcast不允许你设置HTTP头（.htaccess也不是一个选项），但是我们可以在web服务器配置中创建一个反向代理，这将允许你从主域托管流 - { {1}}。我将为Nginx和Apache提供代理配置。

<强> Nginx的

您可以使用“proxy_set_header”添加其他标头，但基本示例为：

Server: Icecast 2.4.2
....
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, If
-Modified-Since
Access-Control-Allow-Methods: GET, OPTIONS, HEAD

<强>的Apache

激活Apache代理模块，并更新radio.com虚拟主机配置配置：

radio.com

现在，您可以使用http://radio.com/stream网址访问您的信息流，并且不会应用CORS政策。该解决方案还带来了一些额外的好处：

您可以将您的http Shoutcast / Icecast流转换为https，这样当您将流嵌入https托管的网页时，浏览器就不会抱怨访问不安全的内容。（Icecast支持SSL配置本身）
8000端口将被替换为端口80，这将允许具有8000端口的侦听器访问您的流。

Answer 2

这是一个HTTP标头。您可以配置您的网络服务器或webapp以发送此标头。也许在htaccess或PHP中。删除以下行

    <header name = "Access-Control-Allow-Origin" value = "*" />

Answer 3

SHOUTcast服务器不支持CORS。如果你要继续使用SHOUTcast，你无法做任何改变。

Answer 4

首先，MediaElementAudioSource没有名为“crossOrigin”的属性。

我只是发现了这个问题，并对消息感到厌烦：MediaElementAudioSource由于的CORS访问限制而输出零。但这只是一个消息，我仍然可以听到音频。我搜索了很多这方面的内容，认为此链接会有所帮助：http://www.codingforums.com/javascript-programming/342454-audio-api-js.html

createMediaElementSource方法应该创建一个使用MediaElementAudioSourceNode接口的对象。此类对象受基于Web Audio API规范的最新草案的跨源资源共享（CORS）限制的约束。（请注意，此限制似乎不在规范的过时W3C版本中。）根据规范，当CORS限制阻止对资源的访问时，应该播放静默，这将解释“输出零”消息;据推测，零等于没有声音。

解除限制，页面所有者在   http://morebassradio.no-ip.org:8214/;stream/1需要配置   他们的服务器输出一个Access-Control-Allow-Origin标头   域名列表（包括您的域名）或提升它的*值   适用于所有域名。鉴于此流似乎已经存在   不受限制的，面向公众的内容，也许你可以说服业主   输出那个标题。您可以测试是否正在发送标头   在Firefox中按Ctrl + Shift + Q打开“网络”面板，加载   流通过地址栏，然后检查标题   与“网络”面板中的该HTTP请求相关联。

请注意，自音频流以来，它们不能使用元元素   显然，不是HTML文档;这种技术只适用于   HTML和XHTML文档。

（虽然您正在搞乱Firefox面板，但您可能需要确保   启用安全错误和警告（通过单击安全性   控制台面板中的按钮或其箭头（Ctrl + Shift + K）。我不确定   如果在Firefox中有相应的CORS消息，就像在Chrome中一样，但是   可能有。我浪费了很多时间，想知道为什么页面不是   在对类似技术进行故障排除的同时工作一天   安全策略（CSP），才发现我有相关的Firefox   消息隐藏。）

您不应该弄乱crossorigin属性/属性   除非你设置crossorigin =“use-credentials”（JavaScript）或   crossorigin =“use-credentials”（HTML）某处，但你可能   没有这样做，因为HTML规范的那部分尚未最终确定，   它几乎肯定会导致你的内容在之后“破解”   这样做，因为那时需要凭证。

我不熟悉Web Audio API，所以我无法想象   如何输出MediaElementAudioSourceNode并触发错误   我自己排除故障的消息。如果我使用createMediaElementSource   使用HTMLMediaElement（HTMLAudioElement），结果似乎不对   基于使用的测试成为MediaElementAudioSourceNode   instanceof运算符，即使规范说它应该是我的   读得对。

然后在我的情况下，我得到HTTP响应标题：

HTTP/1.1 206 Partial Content
Date: Thu, 02 Jun 2016 06:50:43 GMT
Content-Type: audio/mpeg
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: X-Log, X-Reqid
Access-Control-Max-Age: 2592000
Content-Disposition: inline; filename="653ab5685893b4bf.mp3"
Content-Transfer-Encoding: binary
Last-Modified: Mon, 16 May 2016 02:00:05 GMT
Server: nginx
Cache-Control: public, max-age=31536000
ETag: "FpGQqtcf_s2Ce8W_4Mv6ZqSVkVTK"
X-Log: mc.g;IO:2/304
X-Reqid: 71cAAFQgUBiJMVQU
X-Qiniu-Zone: 0
Content-Range: bytes 0-1219327/1219328
Content-Length: 1219328
Age: 1
X-Via: 1.1 xinxiazai211:88 (Cdn Cache Server V2.0), 1.1 hn13:8 (Cdn Cache Server V2.0)
Connection: keep-alive

请注意“Access-Control-Allow-Origin：*”，我认为这是正确的，但我仍然得到消息。希望对你有所帮助。

MediaElementAudioSource由于CORS访问限制而输出零

4 个答案: