时间戳

首页 > 解决方案 > 如何在 React 中处理“播放（）失败，因为用户没有先与文档交互”？

javascript - 如何在 React 中处理“播放（）失败，因为用户没有先与文档交互”？

问题描述

我正在构建一个需要在页面加载时播放音频的 React.js/Gatsby 应用程序。我知道 Chrome 默认不允许自动播放，所以我在钩子中设置了mousemove事件侦听器：useEffect

import React, { useEffect, useRef } from 'react'

const VoiceRecording = ({ source }) => {
  const audioRef = useRef()
  useEffect(() => {
    const playAudio = () => {
      audioRef.current.play()
      removeListeners()
    }
    window.addEventListener('mousemove', playAudio)

    const removeListeners = () => {
      window.removeEventListener('mousemove', playAudio)
    }

    return () => {
      removeListeners()
    }
  }, [])

  return (
    <div>
      <audio src={source} ref={audioRef} controls />
    </div>
  )
}

这有效，但并不矛盾。当页面加载并且我移动光标时音频确实会播放，但在它播放之前，Gatsby 会抛出此错误：play() failed because the user didn't interact with the document first. 我在控制台中遇到了同样的错误。此外，每次页面加载时都不会播放音频。它可能播放 4/10 次。

我也尝试过更改和添加/删除muted, autoplay等属性。没有运气。

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

标签： javascripthtmlreactjsjsxgatsby

解决方案

推荐阅读