2013-11-24 46 views
12

Im使用WebAudio API和new Audio()对象作为源。以下是我正在做的简化版本。但是,这并不会在firefox 25.0.1中播放任何声音。Firefox WebAudio createMediaElementSource不起作用

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/

我在另一个questioncreateMediaElementSource需要CORS读取。上面的例子中的文件似乎有Access-Control-Allow-Origin: *,但它仍然不能在Firefox中工作。如果我本地运行与本地音频文件相同的示例,一切正常。

不知道这是一个错误,或者如果我做了一些非常错误的事情。任何帮助表示赞赏。

+0

这看起来像一个Firefox的错误给我。 CORS头文件肯定存在,代码都是正确的。 –

+0

这看起来像一个错误https://bugzilla.mozilla.org/show_bug.cgi?id=937718 – z33m

+0

嗯。那么,我想你可以使用AJAX作为权宜之计,因为OGG文件有一个CORS头。祝你好运。 –

回答

3

这里的原因:

  1. 火狐(测试前和更新到41.0.1为2015年10月7日之后)似乎有与安全插座不安全的HTTP交叉领域的一些问题。我已更新到https:on媒体源,因为维基媒体拥有替代443 TCP并向“维基媒体基金会”颁发了有效证书。从2015年6月23日至2017年2月19日,来自CA“GlobalSign”。在安全域上时,浏览器也被用来要求安全资源。
  2. 音频DOM元素和其他元素(如图像和视频)具有属性“crossOrigin”,该属性指定要么提供凭据(cookie),要么不提供凭据。匿名交叉来源指定不会将域cookie交换到跨域,这被浏览器认为是安全的。因此,在指定音频源之前,我将“audio.crossOrigin”设置为“anonymous”。

我在Firefox测试和Chrome 45.0.2454.101m(作为第一项说的),他们工作得很好,所以我更新的jsfiddle:https://jsfiddle.net/7bJUU/11/7bJUU

+0

只需向他人说明,您还可以直接使用音频元素上的'crossorigin'属性,如'。 –