ブラウザで鳴らしている音楽に、Web Audio APIを使って音楽にエフェクトを施すことは可能ですか？

前提・実現したいこと

ページに埋め込んだYouTubeやAudioタグなどを利用して音を鳴らして、Web Audio APIを使って鳴らしている音にリバーブやコンプレッサーや音量の変化などを施したいと思っています。
これって可能なのでしょうか。

下記は埋め込んだYouTubeを再生する機能を持ったサンプルです。
※デバイスのマイクの使用が求められます。
※Reactを使っています。
※次項で書きますがものすごいノイズが鳴るので、音量に気を付けてください。
CodeSandBox

再生しているYouTubeを正常に再生しつつ、ひとまずは再生しているYouTubeの音量を、gainNodeを使って操作したいです。

発生している問題・エラーメッセージ

再生するとものすごいノイズが鳴ります。

該当のソースコード

js
1export default function App() {
2  const [playing, setPlaying] = useState(false);
3  const playerProps = {
4    url: "https://youtu.be/TRvqqRIILbE",
5    playing: playing,
6    onPlay: () => startAudio()
7  };
8  useEffect(() => {
9    audioCtx = new AudioContext();
10    gainNode = audioCtx.createGain();
11    navigator.mediaDevices
12      .getUserMedia({ audio: true })
13      .then((stream) => {
14        mediaNode = audioCtx.createMediaStreamSource(stream);
15      })
16      .catch((err) => console.log(err));
17    return () => audioCtx.close();
18  }, []);
19
20  const startAudio = () => {
21    mediaNode.connect(gainNode);
22    gainNode.connect(audioCtx.destination);
23    mediaNode.start();
24    setPlaying(true);
25  };
26  const stopAudio = () => {
27    mediaNode.disconnect();
28    gainNode.disconnect();
29    setPlaying(false);
30  };
31  const changeVolume = (e) => (gainNode.gain.value = e.target.value);
32
33  return (
34    <>
35      <ReactPlayer {...playerProps} />
36      <button onClick={playing ? stopAudio : startAudio}>
37        {playing ? "Stop" : "Start"}
38      </button>
39      <span>Volume</span>
40      <input onChange={changeVolume} step="any" type="range" />
41    </>
42  );
43}