Next.js loadeddata event on <audio> not firing - reactjs

Question

I'm trying to figure out why the loadeddata/loadedmetadata event is not firing in my application. Actually, sometimes it does fire but it's inconsistent. I suspect there is some kind of race condition going on here but after a lot of trial and error and quite a lot of frustration, I'm out of ideas.
So, the idea is simple. I have an <audio> element and I want to run some logic when it is loaded.
This seems to work when I try it in a non-Nextjs React application. Example here
However, when I run the same thing in my Next.js React application locally I observe the aforementioned behaviour, so I suspect that this could be nextjs specific?
This can be minimally reproduced by:
Running npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
Replacing the existing index.js with:
export default function Home() {
const handleMetadata = () => {
alert("hi")
}
return (
<div className="container">
<main>
<audio
id="audio"
onLoadedData={handleMetadata}
onLoadedMetadata={handleMetadata}
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
/>
</main>
</div>
)
}
Repeatedly refreshing the browser window

Answer 1

you should load the compoent which use audio with no ssr.like this:
import dynamic from 'next/dynamic'
const AudioPlayer = dynamic(import('../components/Home'), {
ssr: false
})

Answer 2

This isn't a direct answer but I wanted to share that #YAN7 answer above solved a similar issue for me. I was developing a component in Storybook that was using GSAP scroll trigger to scrub play a video. It worked perfectly in Storybook, but when I went to import it and use it in the UI/Next Js project, it wouldn't work as expected. Occasionally I managed to get the animation effect to work, but most of the time I couldn't. After a lot of console logging, I realised the only significant difference between the two examples was one was in Next and the other wasn't. Which eventually lead me here. I dynamically imported my component into Next as in YAN7's example and it worked perfectly. Many thanks YAN7! I hope this comment helps other GSAP + Next devs in the future