useEffect not initiating audio file function

Question

I'm trying to have a song play in the background of my app when it loads. However, it's not working with useEffect. I've also tried using useState in the useEffect with the same results. In the code below, if I click on the Play button, it works fine. Do you have any pointers on what I'm doing wrong?

First Attempt

const Footer = () => {
  let audio = new Audio(onlyYou);

  const start = () => {
    audio.play();
  };

  const stop = () => {
    audio.pause();
  }

  useEffect(() => {
    start()
  }, [])

  return (
    <footer>
      <div>
        <button onClick={start}>Play</button>
        <button onClick={stop}>Stop</button>
      </div>
    </footer>
   )

Second Attempt

const Footer = () => {
  const [playSong, setPlaySong] = useState(false);

  let audio = new Audio(onlyYou);

  const start = () => {
    audio.play();
  };

  const stop = () => {
    audio.pause();
  }

  useEffect(() => {
    setPlaySong(true)
  }, [])

  return (
    <footer>
      {playSong && start()}
      <div>
        <button onClick={start}>Play</button>
        <button onClick={stop}>Stop</button>
      </div>
    </footer>
   )

Answer 1

Try this

const audio = new Audio(onlyYou)
const Footer = () => {
  useEffect(() => { audio.play() }, [])
  return (...)

to see if it works. This has to work first. Otherwise you might run into the problem that audio can't be started without user confirm problem.

How to make audio autoplay on chrome

Answer 2

It may have to do with the fact that the audio file is not loaded and is not ready to play when useEffect runs. Take a look here.