MediaElementAudioSource outputs zeroes due to CORS access restrictions for

Question

I try get frequency from element audio with src is a url

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

and HTML:

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

but I receive error: MediaElementAudioSource outputs zeroes due to CORS access restrictions for ... I searched very much but i receive a good answer and detail. I'm not really good english, so very super if answers have demo ... thanks

Answer 1

I was running into this problem when I would develop my application by opening the index.html file in my browser. A server was required in order to use the audio files I needed.

I installed the Live Server extension on Visual Studio Code - one of many ways to solve this.

Answer 2

I just find this problem, and mad with the Message:MediaElementAudioSource outputs zeroes due to CORS access restrictions for. But it's just a message, i can still hear the audio. And I googled lots of this, think this link will be helpful:http://www.codingforums.com/javascript-programming/342454-audio-api-js.html

The createMediaElementSource method should create an object that uses the MediaElementAudioSourceNode interface. Such objects are subject to Cross-Origin Resource Sharing (CORS) restrictions based on the latest draft of the Web Audio API spec. (Note that this restriction doesn't appear to be in the outdated W3C version of the spec.) According to the spec, silence should be played when CORS restrictions block access to a resource, which would explain the "outputs zeroes" message; presumably, zero is equivalent to no sound.

To lift the restriction, the owner of the page at http://morebassradio.no-ip.org:8214/;stream/1 would need to configure their server to output an Access-Control-Allow-Origin header with either a list of domains (including yours) or the * value to lift it for all domains. Given that this stream appears to already be unrestricted, public-facing content, maybe you can convince the owners to output that header. You can test whether the header is being sent by pressing Ctrl+Shift+Q in Firefox to open the Network panel, loading the stream through the address bar, and then inspecting the headers associated with that HTTP request in the Network panel.

Note that they can't use a meta element here since the audio stream is, obviously, not an HTML document; that technique only works for HTML and XHTML documents.

(While you're messing with Firefox panels, you may want to make sure Security errors and warnings are enabled (by clicking the Security button or its arrow) in the Console panel (Ctrl+Shift+K). I'm not sure if there's a corresponding CORS message in Firefox like in Chrome, but there might be. I wasted a bunch of time wondering why a page wasn't working one day while troubleshooting a similar technology, Content Security Policy (CSP), only to find that I had the relevant Firefox messages hidden.)

You shouldn't need to mess with the crossorigin property/attribute unless you set crossorigin = "use-credentials" (JavaScript) or crossorigin="use-credentials" (HTML) somewhere, but you probably didn't do that because that part of the HTML spec isn't finalized yet, and it would almost certainly cause your content to "break" after doing so since credentials would be required at that point.

I'm not familiar with the Web Audio API, so I wasn't able to figure out how to output a MediaElementAudioSourceNode and trigger an error message for my own troubleshooting. If I use createMediaElementSource with an HTMLMediaElement (HTMLAudioElement), the result doesn't seem to be a MediaElementAudioSourceNode based on testing using the instanceof operator even though the spec says it should be if I'm reading it right.

Then in my situation, i get the HTTP response Header:

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

Note that "Access-Control-Allow-Origin: *", i think this just the right thing, but i still get the message. Hope it help you.

Answer 3

This is correct. You can't access media from a different domain in Web Audio without CORS enabled on the media server (and making the appropriate CORS request.) This is to prevent cross-domain information attacks.