Html5 Audio, Web Audio Api, Cors And Firefox

I have been trying to get this to run correctly so days now with no luck. I have created a custom audio player, that accesses an MP3 on a S3 Amazon server. The audio player has cus

Solution 1:

The same-origin policy says that scripts run on some origin cannot read resources from another origin. (An origin is a domain, plus a scheme and port, like http://foo.example.com:80.)

Note that the same-origin policy does not prevent cross-origin media from being displayed to the user. Rather, it prevents scripts from programmatically reading cross-origin resources. Consider the <img> tag: a page on example.com can show a cross-origin image from other.com, but a script on example.com's page cannot read the contents of that image. The user can see it; the page cannot.

The Web Audio API can read the contents of audio files. If an audio file is from a different origin, this kind of reading is not allow by the same-origin policy. A user can listen to a cross-origin audio file, but a script on the page cannot read the contents of the file. When you attempt to feed a cross-origin audio file into an analyzer script (e.g., so that you can draw a visualization on a canvas), the same-origin policy should stop you. You are attempting to violate the same-origin policy, and the browser is correctly stopping you by refusing to play the audio in way that would allow you to read the file contents.

Note that Chrome does not prevent such cross-origin file reading for audio files, and this is incorrect behavior.

The correct solution is to have your media servers serve the audio files with a CORS Access-Control-Allow-Origin: * HTTP response header. However, this currently does not work in Firefox, which is incorrect behavior. If Firefox hopes to have a compliant implementation, this will be fixed eventually.

Solution 2:

Confirmed that there is a bug in Firefox for using the createMediaElementSource method on a cross domain source:

https://bugzilla.mozilla.org/show_bug.cgi?id=937718