未定义下一个 JS 音频构造函数

Question

我明白为什么这不起作用，但我找不到解决方案。

我的项目有一个标准的 Next JS 结构。

我已经在根目录中添加了一个 components 目录。

内部组件我有以下组件：

import { useState } from 'react'

export default function Player({url}) {

    const [audio, setAudio] = useState(new Audio(url))

    return (
      <button onClick={ audio.play() }>Play Audio</button>
    )
}

这个（简化示例）组件正在导入到我的一个页面中。

我看到以下错误：ReferenceError: Audio is not defined

我理解这是因为组件正在服务器上编译，而 NodeJS 不知道 Audio() 是什么。

但是我找不到解决这个问题的方法。

我已经尝试导入 useEffect 并在安装组件后从中设置状态，但这会导致其他错误，我认为这不是正确的解决方案。

任何关于从 NextJS 组件内与浏览器 API 交互的最佳实践的帮助将不胜感激。

**更新：评论者要求实现 useEffect

import { useState, useEffect } from 'react'

export default function Player({url}) {

  useEffect(() => {
    const [audio, setAudio] = useState(new Audio(url))
  }, [])

  return (
    <button onClick={ audio.play() }>Play Audio</button>
  )
}

Returns ReferenceError: audio is not defined

Answer 1

您的 useEffect 实施是错误的。此外，您需要将函数传递给 onClick。改为做这样的事情：

import { useState, useEffect } from 'react'

export default function Player({ url }) {

  const [audio, setAudio] = useState(null)

  useEffect(() => { setAudio(new Audio(url)) }, [])

  return <button onClick={() => { audio?.play() }}>Play Audio</button>
}

另请参阅：Rules of Hooks

这是一个CodeSandbox

未定义下一个 JS 音频构造函数

Next JS Audio constructor is not defined

javascript

web-audio-api

next.js