Audio is not defined

[MejanH]

I tried to play an audio file when a button is triggered like the code below.

const [audio] = useState(new Audio(URL))
audio.play()

but it's saying Audio is not defined.

[c0b41]

because you can't run Audio api on server

const [audio, setAudio] = useState(null)

useEffect(() => {

    setAudio(new Audio(URL)) // only call client

})

[jamesmosier]

You will likely only want to call this once, therefore you should add a [] dependency array to the effect:

const [audio, setAudio] = useState(null)
useEffect(() => {
  setAudio(new Audio(URL))
// only run once on the first render on the client
}, [])

---

Alternatively you could use next/dynamic with ssr: false to not render your particular component that uses the Audio API on the server.

[ats1999]

Alternatively you could use next/dynamic with ssr: false to not render your particular component that uses the Audio API on the server.

No need to escape SSR, if any component have any code that can run only on the client then call it into the useEffect hook.