Detect if cors is enabled?

Question

How do i go about detecting if cors is enabled on a html5 audio element's remote file through javascript?

I would like to output a visualizer attached to the AudioContext only IF the audio tag's remote src file has cors enabled.

Answer 1

Just request the file through javascript before loading the resource, and check the response headers for the access-control-allow-origin header.

If the resource has the header, update the tag's src attribute with the resources' URL.

jQuery example of checking headers from request:

var audioSource = 'mysite.com/audiosource.ogg';
$.get( audioSource, function( data, textStatus, request) {
    var header = request.getResponseHeader('access-control-allow-origin');

    if(typeof header !== 'undefined') {
         $('#audiotag').attr('src', audioSource);
    }
});

It's worth noting that if the access-control-allow-origin header is set and you're not requesting from the right domain you'll be forbidden from loading the resource anyway