CODEWITHSUNDEEP
javascriptaudiohtml5-audioweb-audio-api
w74
w74

Reputation: 1

oddity about createMediaElementSource()

I was building an audio program and hit a stumbling block on the .createMediaElementSource method. I was able to solve the problem, but I do not quite know why the solution works.

In my HTML, I created an audio player: <audio id="myAudio><source src="music.mp3"></audio>

Now in my JS:

context = new AudioContext();
audio = document.getElementById('myAudio');
source = context.createMediaElementSource(audio);
audio.play();

doesn't work. The audio element loads, but doesn't play the song, nor is there audio.

However! This JS code works:

context = ...; //same as above
audio...;
source = context.createMediaElementSource(audio[0]);
audio.play();

All I changed was adding a [0] to the audio and the program suddenly works again. Since .getElementById doesn't return an array, I don't know why referring to audio as an array works, but just referring to audio does not.

Upvotes: 0

Views: 1488

Answers (1)

Birjolaxew
Birjolaxew

Reputation: 817

A few months late, but in case others stumble upon this and want an answer:

This behaviour is described in the Web Audio API spec:

The createMediaElementSource method

Creates a MediaElementAudioSourceNode given an HTMLMediaElement. As a consequence of calling this method, audio playback from the HTMLMediaElement will be re-routed into the processing graph of the AudioContext.

Emphasis mine. Since the output from the audio element is now routed into the newly created MediaElementAudioSourceNode instance (instead of the original destination, usually your speakers), you need to route the output of the instance back to the original destination:

var audio = document.getElementById('myAudio');
var ctx = new AudioContext();

var src = ctx.createMediaElementSource(audio);
src.connect(ctx.destination); // connect the output of the source to your speakers
audio.play();

The reason it worked when you added [0] is that document.getElementById doesn't return an array, or an element with a defined key of "0". As such, you might as well have written ctx.createMediaElementSource(undefined), which doesn't re-route the audio from the #myAudio element.

Upvotes: 5

Related Questions