3

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>
Community
  • 1
  • 1
Eliot Winder
  • 252
  • 2
  • 9

1 Answers1

1

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

cwilso
  • 13,610
  • 1
  • 30
  • 35
  • Ah - I thought so - however, this isn't working even if the file is in the same domain ( not sure how to model this in stackoverflow – Eliot Winder Mar 27 '15 at 21:30
  • 1
    When you say they're in the same domain, are they both in local files, loaded with "file://" URLs? Local files never work with CORS. Everything has to be loaded via HTTP. – aldel Mar 30 '15 at 14:08