Web Audio API and <audio> tag

Question

I'm having issues getting the html5 tag to play nice with the Web Audio API .createMediaElementSource() method. See below for jsFiddle/code. Any idea what is going wrong here would be greatly appreciated.

I read here that this is a problem in FireFox, but a) I'm working in Chrome and b) it doesn't work if the .mp3 is in the same folder as the .html.

The end goal here is to use create a site that filters tracks coming from the SoundCloud API if anyone has any suggestions.

http://jsfiddle.net/6v9jkcn1/

js:

$(function(){
  //create audio context
  var context = new AudioContext();

  //set variable pointing at the audiotag
  var audio = document.getElementById('player');

  //declare source that will become the media element source, create gain and filter, and connect them
  var source;
  var gain = context.createGain();
  var filter = context.createBiquadFilter();

  //routing
  gain.connect(filter);
  filter.connect(context.destination);
  filter.frequency.value = 220;

  //when the audio has sufficiently loaded, create media element source and connect it to the gain
  audio.oncanplaythrough = function(){

        source = context.createMediaElementSource(audio);

        source.connect(gain);
      };
    });

HTML:

<audio id='player' src='http://develiot.com/eqsoundcloud/EttaAnything.mp3' controls></audio>

Answer 1

Chrome follows the Same Origin Policy too, unless you have CORS enabled on your server.