Firefox WebAudio createMediaElementSource不起作用 [英] Firefox WebAudio createMediaElementSource not working

问题描述

使用WebAudio API和新的Audio（）对象作为源代码。以下是我正在做的简化版本。然而，这并不会在firefox 25.0.1中播放任何声音。

  var context; 
 if（window.webkitAudioContext）{
 context = new webkitAudioContext（）; 
} else {
 context = new AudioContext（）; 
} 
 var audio = new Audio（）; 
 
 //这个文件好像有CORS标题
 audio.src =http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample .OGG; 
 
 var source; 
函数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/

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

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

解决方案

这是为什么：

1. Firefox（截至2015年10月7日更新至41.0.1之前和之后进行测试）似乎在安全套接字HTTP上的不安全跨域有一些问题。我已更新到https：on媒体来源，维基媒体有替代443 TCP与发给维基媒体基金会的有效证书。从2015年6月23日至2017年2月19日，来自CAGlobalSign。在安全域上时，浏览器也被用来要求安全资源。
   

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

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.

解决方案

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

这篇关于Firefox WebAudio createMediaElementSource不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！