Firefox WebAudio createMediaElementSource not working
firefox, html, html5-audio, web-audio-api
Solution
Here's why:
- 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.
- 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`
Problem
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.