Question

我尝试从元素音频获取频率，src是一个网址

var aud = document.getElementById("audio-player"); 
var canvas, ctx, source, context, analyser, fbc_array;
function initMp3Player(){
try {
  context = new (window.AudioContext || window.webkitAudioContext)();
} catch(e) {
    throw new Error('The Web Audio API is unavailable');
}

analyser = context.createAnalyser(); // AnalyserNode method
analyser.smoothingTimeConstant = 0.6;
analyser.fftSize = 512;
canvas = document.getElementById('canvas_up');

ctx = canvas.getContext('2d');

source = context.createMediaElementSource(aud); 

source.crossOrigin = 'anonymous';
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}

function frameLooper(){
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
console.log(fbc_array);

var gradient = ctx.createLinearGradient(0,0,0,300);
gradient.addColorStop(1,'#000000');
gradient.addColorStop(0.65,'#000000');
gradient.addColorStop(0.55,'#FF0000');
gradient.addColorStop(0.25,'#FFCC00');
gradient.addColorStop(0,'#ffffff');

if(fbc_array != null){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

ctx.fillStyle = gradient; // Color of the bars
for (var i = 0; i < (fbc_array.length); i++ ){
  var value = -(fbc_array[i]/4);
  ctx.fillRect(i*5,canvas.height,4,value*2);
}
}
window.addEventListener("load", initMp3Player, false);

和HTML：

<audio id="audio-player"><source src="" type="audio/mpeg"></audio>

但我收到错误：由于CORS访问限制，MediaElementAudioSource输出零... 我搜索得非常多，但我收到了很好的答案和细节。我的英语不是很好，所以如果答案有演示就非常超级...谢谢

Answer 1

这是对的。如果未在媒体服务器上启用CORS（并发出相应的CORS请求），则无法从Web Audio中的其他域访问媒体。这是为了防止跨域信息攻击。

Answer 2

我只是发现了这个问题，并对消息感到厌烦：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访问限制而输出零

2 个答案: