How to fix "Audion could not identify the object calling 'connect'" error when trying to run AudioContext.createMediaElementSource()?

Question

Trying to create an audio element using javascript and then create an audio source by calling AudioContext.createMediaElementSource(), but get an error in Chrome console saying Audion could not identify the object calling "connect"

Screenshot of the error message

I tried to create this audio element in HTML and use Document.querySelector() to get this audio file but got the same error.

const audio = new Audio("./path/to/audio.mp3");
const audioSource = audioCtx.createMediaElementSource(audio);
audioSource.connect(audioCtx.destination);

Answer 1

The warning is coming from a Chrome extension which is officially called Web Audio Inspector. It's codename is Audion. The source code is available on GitHub. The warning message get's generated here: https://github.com/google/audion/blob/master/js/entry-points/tracing.js#L747

I think the problem is that Audion still patches the prototype of the BaseAudioContext but a recent change in the spec moved functions like createMediaElementSource() to the AudioContext prototype. I will go ahead and create an issue for that on GitHub which will hopefully get fixed at some point.

That being said, it's just a warning and it should not stop your website from working correctly.