<audio> 上的 Next.js loaddata 事件未触发

Question

我试图找出为什么 loaddata/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"

2. 将现有的替换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>
  )
}

3. 反复刷新浏览器窗口

Answer 1

您应该加载使用不带 ssr 的音频的组件。如下所示：

import dynamic from 'next/dynamic'
const AudioPlayer = dynamic(import('../components/Home'), {
    ssr: false
})