Javascript MediaElementAudioSource由于CORS访问限制而输出为零 //创建音频对象的新实例并调整其某些属性 var audio=新音频（）； audio.src=http://subdomain.domain.org:port/;流/1'； audio.controls=true； audio.loop=true； audio.autoplay=true； audio.crossorigin=“匿名”； //确定分析仪将使用的所有变量 var画布、ctx、源、上下文、分析器、fbc_数组、条形、条形、条形、条形宽度、条形高度； //在页面将其所有HTML加载到窗口后初始化MP3播放器 addEventListener（“加载”，initmp3plyer，false）； 函数initMp3Player（）{ document.getElementById（'audio_-box'）.appendChild（audio）； context=new（window.AudioContext | | window.webkitadiocontext）（；//AudioContext对象实例//AudioContext对象实例 Analyzer=context.createAnalyzer（）；//AnalyzerNode方法 canvas=document.getElementById（'analyzer_render'）； ctx=canvas.getContext（'2d'）； //将音频播放重新路由到AudioContext的处理图中 source=context.createMediaElementSource（音频）； source.crossOrigin='anonymous' 源。连接（分析仪）； 分析器.连接（上下文.目的地）； frameLooper（）； } //frameLooper（）为您希望播放音频的任何图形样式设置动画 //以浏览器提供的默认帧速率循环（约60 FPS） 函数frameLooper（）{ （requestAnimationFrame | | webkitRequestAnimationFrame）（frameLooper）； fbc_阵列=新UINT8阵列（分析仪频率b计数）； Analyzer.getByteFrequencyData（fbc_数组）；//获取频率 ctx.clearRect（0，0，canvas.width，canvas.height）；//清除画布 ctx.fillStyle='#00CCFF'；//条的颜色 钢筋=100； 对于（变量i=0；i

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

---

URL与音频元素完美配合，因此与URL无关；我甚至尝试过类似

http://subdomain.domain.org:port/file.mp3

。我在网上发现，使用Icecast的人也有同样的问题，Icecast是

.ogg

。如何修复此问题？

这是一个HTTP头。您将配置您的Web服务器或webapp以发送此标头。可能是在htaccess或PHP中。删除下面的行

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

SHOUTcast服务器不支持COR。如果要继续使用SHOUTcast，则无法更改此设置。

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

我刚刚发现了这个问题，并对消息感到愤怒：MediaElementAudioSource由于对的CORS访问限制而输出零。但这只是一个信息，我仍然能听到音频。 我在谷歌上搜索了很多，我认为这个链接会很有帮助：

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

若要取消此限制，请访问 需要进行配置 他们的服务器将输出一个带有 域列表（包括您的域）或提升它的*值 对于所有域。假定此流似乎已经 无限制、面向公众的内容，也许你可以说服所有者 以输出该标头。您可以测试是否正在发送标头 在Firefox中按Ctrl+Shift+Q打开网络面板，加载 流通过地址栏，然后检查标头 与网络面板中的HTTP请求关联

注意，他们不能在这里使用元元素，因为音频流 显然，不是HTML文档；这种技术只适用于 HTML和XHTML文档

（当你在摆弄Firefox面板时，你可能需要确保 安全性错误和警告已启用（通过单击安全性 按钮或其箭头），我不确定 如果Firefox中有与Chrome类似的CORS消息，但是 可能有。我浪费了很多时间想知道为什么一个页面没有 工作一天，同时对类似的技术、内容进行故障排除 安全策略（CSP），却发现我有相关的Firefox 隐藏的消息。）

您不需要处理crossorigin属性/属性 除非设置crossorigin=“使用凭据”（JavaScript）或 crossorigin=“使用凭证”（HTML）的某个地方，但您可能 没有这样做是因为HTML规范的那部分还没有最终确定， 而且它几乎肯定会导致您的内容在之后“中断” 这样做是因为此时需要凭证

我不熟悉Web音频API，因此无法理解 了解如何输出MediaElementAudioSourceNode并触发错误 用于我自己的疑难解答的消息。如果我使用createMediaElementSource 使用HTMLMediaElement（HtmlLaudioElement）时，结果似乎不一样 要成为MediaElementAudioSourceNode，请使用 instanceof运算符，即使规范中说如果我 正确阅读

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

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

注th

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

<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 

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

server {
    listen   80;
    server_name radio.com;
    ....
    location /stream { 
       proxy_set_header X-Forwarded-For $remote_addr; 
       proxy_pass http://stream.radio.com:8000/mount; 
    }
    ....
}

<VirtualHost *:80>
   ServerName radio.com
   ....
   ProxyPass /stream http://stream.radio.com:8000/mount
</VirtualHost>