React.js - useEffect() 钩子中的 removeEvent()

Question

我正在尝试让 HTML5 音频元素在页面加载时自动播放。我知道 Chrome 默认情况下不允许自动播放，除非有什么触发它。所以我在 useEffect() 钩子中创建了几个事件监听器：

const Audio = () => {
  const audioPlayer = document.getElementById('myAudio')
  const playAudio = () => audioPlayer.play()
  useEffect(() => {
    window.addEventListener('scroll', playAudio)
    window.addEventListener('mousemove', playAudio)
    return () => {
      window.removeEventListener('scroll', playAudio)
      window.removeEventListener('mousemove', playAudio)
    }
  }, [])
  return (
    <audio
      id="myAudio"
      src={ audioAssetHere }
    />
  )
}

这确实有效，但每次光标移动时都会继续播放。我只希望它播放一次。我也在控制台中收到此错误：

DOMException: play() failed because the user didn't interact with the document first

但每次光标移动时音频仍然有效。

我也尝试使用useRef并将其分配给音频标签ref={audioRef}，然后在useEffect钩子中使用它：

const audioRef = useRef()
const playAudio = () => audioRef.current.play()
useEffect(() => {
    window.addEventListener('scroll', playAudio)
    window.addEventListener('mousemove', playAudio)
    return () => {
      window.removeEventListener('scroll', playAudio)
      window.removeEventListener('mousemove', playAudio)
    }
  }, [])

这给出了错误：

TypeError: audioRef.current.play is not a function

简而言之，我想要的是每次页面加载时播放的音频。而且我只希望它播放一次。

任何帮助将不胜感激。谢谢

Answer 1

您尝试在每个 mousemove/scroll 事件上播放音频，而不是它，您只需要在第一个 mousemove/scroll 事件上播放一次：

const Audio = () => {
  const audioRef = React.useRef();

  useEffect(() => {
    const playAudio = () => {
      audioRef.current.play();
      removeListeners()
    }

    window.addEventListener('scroll', playAudio)
    window.addEventListener('mousemove', playAudio)
    
    const removeListeners = () => {
      window.removeEventListener('scroll', playAudio)
      window.removeEventListener('mousemove', playAudio)
    }
    
    return () => {
      removeListeners()
    }
  }, [])
  
  return (
    <audio
      src={ audioAssetHere }
      ref={ audioRef }
    />
  )
}