К сожалению, я думаю, что невозможно делать то, что вы хотите. По крайней мере, не совсем так, как вы хотите.
Заводская функция createMediaElementSource() работает только с медиаэлементами. И это только элементы <audio/> и <video/>. Вот почему он не работает, когда вы используете его с <iframe/> напрямую.
Обычно вы запрашиваете такой медиа-элемент, например, по его идентификатору:
document.querySelector('#myAudioElement');
Но это не так просто, если элемент находится внутри <iframe/>. Тогда можно запросить элемент, только если <iframe/> и родительский документ имеют одинаковое происхождение. Это из-за политики того же происхождения , которая является функцией безопасности. Представьте, что может сделать злоумышленник, если удастся загрузить любую страницу в <iframe/>, а затем изменить ее по своему желанию.
Конечно, это помеха для вашего варианта использования. Может быть, вам стоит создать расширение для браузера, потому что они обычно имеют больше привилегий и могут запрашивать DOM любой страницы, загружаемой браузером.
Кроме того, в некоторых браузерах также можно отключить политику одного и того же происхождения. Но это обычно полезно только во время разработки, потому что вы можете отключить эту политику только для всего браузера, что является проблемой безопасности, если только вы не открываете сайты, которым вы полностью доверяете.