<audio> 上的 Next.js 加载数据事件未触发答案

【问题标题】：Next.js loadeddata event on <audio> not firing<audio> 上的 Next.js 加载数据事件未触发
【发布时间】：2022-02-16 19:49:39
【问题描述】：

我试图弄清楚为什么我的应用程序中没有触发loadeddata/loadedmetadata 事件。实际上，有时它确实会火，但它是不一致的。我怀疑这里发生了某种竞争情况，但是经过大量的试验和错误以及很多挫折之后，我没有想法了。

所以，这个想法很简单。我有一个<audio> 元素，我想在加载它时运行一些逻辑。

当我在非 Nextjs React 应用程序中尝试时，这似乎有效。示例here

但是，当我在本地 Next.js React 应用程序中运行相同的东西时，我观察到上述行为，所以我怀疑这可能是 nextjs 特定的？

这可以通过以下方式复制：

运行npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
将现有的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>
  )
}

反复刷新浏览器窗口

【问题讨论】：

标签： reactjs next.js html5-audio

【解决方案1】：

你应该加载使用没有ssr的音频的组件。像这样：

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

【讨论】：