Next.jsloadeddata 事件<audio>未触发

Question

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

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

Answer 2

这不是一个直接的答案，但我想分享上面的 @YAN7 答案为我解决了类似的问题。我正在 Storybook 中开发一个组件，它使用 GSAP 滚动触发器来擦除播放视频。它在 Storybook 中工作得很好，但是当我导入它并在 UI/Next Js 项目中使用它时，它无法按预期工作。有时我能够让动画效果发挥作用，但大多数时候我做不到。经过大量控制台日志记录后，我意识到这两个示例之间唯一显着的区别是一个在 Next 中，另一个则不在。这最终引导我来到这里。我将我的组件动态导入到 Next，就像 YAN7 的示例一样，它运行得很好。非常感谢YAN7！我希望这个评论能够帮助其他 GSAP + Next 开发者将来