Firefox WebAudio createMediaElementSource not working

问题

Im using the WebAudio API with new Audio() object as a source. The following is a simplified version of what i am doing. This however, doesnt play any sounds in firefox 25.0.1.

var context;
if(window.webkitAudioContext) {
    context = new webkitAudioContext();
} else {
    context = new AudioContext();
}
var audio = new Audio();

// This file does seem to have CORS Header
audio.src = "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg";

var source;
function onCanPlay() {
    console.log("can play called");
    source = context.createMediaElementSource(audio);
    source.connect(context.destination);
    audio.removeEventListener("canplay", onCanPlay);
    audio.play();
}

if(audio.readyState < 3) {
    audio.addEventListener("canplay", onCanPlay);
} else {
    onCanPlay();
}

jsFiddle: http://jsfiddle.net/7bJUU/

I read in another question that createMediaElementSource requires CORS. The file in above example does seem to have Access-Control-Allow-Origin: * but it still doesnt work in firefox. If i run the same example locally with a local audio file, everything works fine.

Not sure if this is a bug or if im doing something terribly wrong. Any help is appreciated.

回答1:

Here's why:

1. Firefox (tested before and after update to 41.0.1 as of October 07, 2015) seems to have some issue with unsecure cross-domains on secure-socket HTTP. I updated to https: on media source, as Wikimedia has alternative 443 TCP with a valid certificate issued to "Wikimedia Foundation, Inc." from June 23, 2015 until February 19, 2017, from CA "GlobalSign". When on a secure domain, browsers are used to require secure resources as well.
2. The Audio DOM element and other elements like Image and Video have the property "crossOrigin", which specifies to either provide credentials (cookies) or not. The anonymous cross-origin specifies that there will be no exchange of domain cookies to cross-domain, which is considered secure by the browser. So, I set "audio.crossOrigin" to "anonymous" before specifying audio's source.

I tested on Firefox (as said on first item) and Chrome 45.0.2454.101m, and they worked fine, and so I updated on JSFiddle: https://jsfiddle.net/7bJUU/11/7bJUU

来源：https://stackoverflow.com/questions/20180550/firefox-webaudio-createmediaelementsource-not-working