Firefox WebAudio createMediaElementSource 不起作用

Question

我使用带有new Audio() 对象作为源的WebAudio API。以下是我正在做的简化版本。但是，这不会在 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/

我在另一个question 中读到createMediaElementSource 需要CORS。上面示例中的文件似乎确实有Access-Control-Allow-Origin: *，但它仍然无法在 Firefox 中工作。如果我使用本地音频文件在本地运行相同的示例，一切正常。

不确定这是错误还是我做错了什么。任何帮助表示赞赏。

Answer 1

原因如下：

1. Firefox（在 2015 年 10 月 7 日更新到 41.0.1 之前和之后测试）似乎在安全套接字 HTTP 上的不安全跨域存在一些问题。我在媒体源上更新为 https:，因为 Wikimedia 有替代 443 TCP 和颁发给“Wikimedia Foundation, Inc.”的有效证书。从 2015 年 6 月 23 日到 2017 年 2 月 19 日，来自 CA“GlobalSign”。在安全域中，浏览器也需要安全资源。
2. 音频 DOM 元素和图像和视频等其他元素具有“crossOrigin”属性，该属性指定是否提供凭据 (cookie)。匿名跨域指定不会跨域交换域cookie，这被浏览器认为是安全的。因此，我在指定音频源之前将“audio.crossOrigin”设置为“匿名”。

我在 Firefox（如第一项所述）和 Chrome 45.0.2454.101m 上进行了测试，它们运行良好，因此我在 JSFiddle 上进行了更新：https://jsfiddle.net/7bJUU/11/7bJUU