0

My objective is to create an audio visualizer that responds to the playback of a Youtube video. Unfortunately, YouTube uses an iframe, which seems to mean that accessing the media stream is impossible due to cross-origin requests (at least, I haven't been able to get it to work).

Is there a front-end solution? Is there any way to hook into the browser audio, or accomplish this in some other way without accessing the iframe's inner DOM elements?

What about using a library to download the video/audio and store it in local browser cache? Is it possible to sync with the embedded playback by getting a timestamp from Youtube's api and read a local copy for the audio processing? I've been trying all day to select the video element and create an audio context, but I don't know if there are any options to explore.

There is a similar question about 7 years ago: Is there anyway to visualize youtube audio from an iframe using the web audio api? But the only solution required using something called "youtube-audio-stream" which is some kind of local app to stream youtube audio. At least, I haven't been able to get it to work with codepen, jsfiddle or codesandbox. I'd like it to be used alongside or transparently with the embedded youtube player and I'm not exactly sure if that is the direction I should be looking.

absoluteBeginner
  • 1
  • *but cross-origin requests won't allow access to embedded iframe* - correct, that's called "security", and it can't be circumvented - if it could, then there'd be no security any more – Jaromanda X Aug 04 '22 at 01:22
  • Please provide enough code so others can better understand or reproduce the problem. – Community Aug 04 '22 at 07:26

1 Answers1

0

Maybe start with here:

Detect if audio is playing in browser Javascript

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

I am not sure if that would be the solution to your requirement, but worth a try.

Shakti
  • 723
  • 8
  • 15