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.

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.

• javascript
• cors

• I don't see any reason to specifically detect CORS. Just try to access the resource, if it fails, don't show your visualiser. – Bergi Commented Mar 6, 2016 at 19:20
• 1 yeah you not seeing it doesn't mean I don't need it... – vimes1984 Commented Mar 7, 2016 at 0:43
• But what do you need it for? How is disabled CORS any different from a mundane networking error? – Bergi Commented Mar 7, 2016 at 9:14
• Well I was trying to help. And if you had realised that you didn't need it, that would surely have solved your problem. – Bergi Commented Mar 7, 2016 at 15:54
• :D no problem thank you for the attempt at help! I do need it though :D – vimes1984 Commented Mar 7, 2016 at 21:15

1 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./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