antonioru / beautiful-react-hooks

Line 110 in ae46e09

const audioRef = useRef<HTMLAudioElement>(new Audio(src))

demo:

const UseAudioComponent = () => {
  const [src, setSrc] = useState("");
  const [state, controls] = useAudio(src, { autoPlay: true });
  useEffect(() => {
    setSrc("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3");
  }, []);
};

expect:
After change src source, audio can play normally.

hi @bs32g1038 thanks for opening this issue, I'm not sure the useAudio hook is supposed to work that way to be honest... if you want it to be reactive please feel free to submit a PR

The way I see this is that it should be done this way:

const UseAudioComponent = () => {
  const [state1, controls1] = useAudio(src1, { autoPlay: true });
  const [state2, controls2] = useAudio(src2, { autoPlay: false });
  
  useEffect(() => {
    controls2.play()
  }, []);
};

I'm closing this for now

useAudio hook can't change src when input new src