15

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.

Community
  • 1
  • 1
z33m
  • 5,993
  • 1
  • 31
  • 42
  • This looks like a Firefox bug to me. CORS headers are definitely there, and the code is all correct. – Kevin Ennis Nov 25 '13 at 20:33
  • This does look like a bug https://bugzilla.mozilla.org/show_bug.cgi?id=937718 – z33m Nov 26 '13 at 04:11
  • Hmm. Well, I guess you can probably use AJAX as a stopgap, since the OGG file has a CORS header. Good luck. – Kevin Ennis Nov 26 '13 at 15:37
  • @Kevin Do you have any examples on this. So how will that work? we load file via ajax and then covnert it to a buffered source?? – z33m Jan 07 '14 at 05:27
  • Yeah, this'll do it: http://jsbin.com/InAZaREl/1/edit. To be clear, the "workaround" is to just skip `Audio()` and use a `BufferSourceNode`. But it's pretty straight-forward. – Kevin Ennis Jan 07 '14 at 16:02
  • Thanks for the example. But this would download the entire file before it starts playing right? i am trying to play lengthy songs. – z33m Jan 07 '14 at 16:23
  • Correct. It would need to download and decode the entire file before playback would begin. – Kevin Ennis Jan 07 '14 at 18:32
  • I hate this bug. I have done a visualisation of audio frequency, that works so well on webkit. But not on firefox ... And of course, I want to stream, not to download the entire file before being able to visualise it ... – vekah Jan 21 '14 at 15:21
  • How can we be noticed that this bug is corrected ? – vekah Jan 21 '14 at 15:30
  • 2
    @vekah i think you can just add yourself to the cc-list on the bugzilla page. As a workaround, you could setup a proxy on the same domain, because, as far as i've checked, this bug doesnt affect files from the same origin. – z33m Jan 21 '14 at 16:38

1 Answers1

6

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

Diego S.
  • 161
  • 1
  • 9