Using (live) media stream as source for audio elements

[IdealPress]

Hi there, I'm pretty to new both react and react-three-fiber but really love this project and what I've been able to do with it so far, so before I start I just wanted to say thanks for all your work (everyone!).

I feel like what I'm trying to do is quite simple, I'm trying to use an effectively infinite media stream as the source for an audio element. I've got an example working in standard THREE.js here and I've forked the 'r3f audio analyser' example here and am basically trying to bring the two in line as much as I can. At first I thought I would be able to simply use the <PositionalAudio> element from the drei library and pass it the media stream url (such as this one: https://balamii.out.airtime.pro:8000/balamii_a) like so <PositionalAudio url={https://balamii.out.airtime.pro:8000/balamii_a}> However, (I think) because it executes asynchronously it waits for the media to be loaded(?) which will never happen as it's a livestream and will go on forever!

I then started to try and recompose my standard THREE.js example using the react-three-fiber components and got to the point where I'm now looking at the source for the <PositionalAudio> component and am trying to work out how I can hack this into a shape that will allow for this kind of incoming media stream. However, at this point I feel like I am increasingly out of my depth...

Any suggestions or advice people have would be really appreciated as I'm a bit lost!

[IdealPress]

Update! I've managed to get the r3f audio analyser fork working (https://codesandbox.io/s/r3f-audo-analyser-forked-leq3g?file=/src/App.js) by adding a mediaElement and setting the THREE.Audio sound to consume this mediaElement with setMediaElementSource:

function PlaySound() {
  // This component creates a suspense block, blocking execution until
  // all async tasks (in this case PositionAudio) have been resolved.
  const [listener] = useState(() => new THREE.AudioListener());
  const { camera } = useThree();
  const sound = useRef(new THREE.Audio(listener));
  const mediaElement = new Audio(
    "https://balamii.out.airtime.pro:8000/balamii_a"
  );
  mediaElement.crossOrigin = "anonymous";
  mediaElement.play();
  useEffect(() => {
    sound.current.setMediaElementSource(mediaElement);
    sound.current.setRefDistance(10);
    camera.add(listener);
    return () => camera.remove(listener);
  });
  return (
    <Suspense fallback={null}>
      <positionalAudio ref={sound} args={[listener]} />
      <Analyzer sound={sound} />
    </Suspense>
  );
}

The issue I have now is that it echoes the sound as it re-executes the useEffect function...