Search code examples
javascripthtml5-audioweb-audio-apiaudiocontext

Connecting MediaElementAudioSourceNode to AudioContext.destination doesn't work


Here's a fiddle to show the problem. Basically, whenever the createMediaElementSource method of an AudioContext object is called, the output of the audio element is re-routed into the returned MediaElementAudioSourceNode. This is all fine and according to spec; however, when I then try to reconnect the output to the speakers (using the destination of the AudioContext), nothing happens.

Am I missing something obvious here? Maybe it has to do with cross-domain audio files? I just couldn't find any information on the topic on Google, and didn't see a note of it in the specs.

Code from the fiddle is:

var a = new Audio();
a.src = "http://webaudioapi.com/samples/audio-tag/chrono.mp3";
a.controls = true;
a.loop = true;
a.autoplay = true;
document.body.appendChild(a);

var ctx = new AudioContext();


// PROBLEM HERE
var shouldBreak = true;
var src;
if (shouldBreak) {
    // this one stops playback
    // it should redirect output from audio element to the MediaElementAudioSourceNode
    // but src.connect(ctx.destination) does not fix it
    src = ctx.createMediaElementSource(a);
    src.connect(ctx.destination);
}

Solution

  • Yes, the Web Audio API requires that the audio adhere to the Same-Origin Policy. If the audio you're attempting to play is not from the same origin then the appropriate Access-Control headers are required. The resource in your example does not have the required headers.