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

这就是原因：

Firefox（自2015年10月7日更新至41.0.1之前和之后经过测试）似乎在安全套接字HTTP上存在一些不安全的跨域问题。我更新了https：on media source，因为维基媒体有另外的443 TCP，并且有一个有效的证书发给了维基媒体基金会。＆＃34;从2015年6月23日到2017年2月19日，来自CA＆＃34; GlobalSign＆＃34;。在安全域上，浏览器也用于要求安全资源。
Audio DOM元素和其他元素（如图像和视频）具有属性＆＃34; crossOrigin＆＃34;，它指定是否提供凭据（cookie）。匿名跨域指定不会将域cookie交换到跨域，这被浏览器认为是安全的。所以，我设置＆＃34; audio.crossOrigin＆＃34;到＃34;匿名＆＃34;在指定音频源之前。

我测试了Firefox（如第一项所述）和Chrome 45.0.2454.101m，他们工作正常，所以我更新了JSFiddle：https://jsfiddle.net/7bJUU/11/ 7bJUU

Firefox WebAudio createMediaElementSource无法正常工作

1 个答案: