我试图找出为什么loadeddata/loadedmetadata事件在我的应用程序中没有触发。实际上，有时候它会触发，但不一致。我怀疑这里有某种竞争条件，但经过大量的尝试和错误，以及相当多的挫折，我没有主意了。
所以，这个想法很简单，我有一个<audio>元素，我想在加载它时运行一些逻辑。
当我在一个非Nextjs React应用程序中尝试时，这似乎可以工作。
然而，当我在本地的Next.js React应用程序中运行相同的东西时，我观察到了前面提到的行为，所以我怀疑这可能是nextjs特有的。
这可以通过以下方式最低限度地重现：
1.运行npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
1.将现有的index.js替换为：

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>
  )
}

1.反复刷新浏览器窗口