使用 React-Audio-Player 在鼠标移动时自动播放音频文件答案

【问题标题】：Autoplaying audio file on Mouse Move with React-Audio-Player使用 React-Audio-Player 在鼠标移动时自动播放音频文件
【发布时间】：2021-09-22 05:17:47
【问题描述】：

一旦用户在我的应用程序的着陆页上移动鼠标，我想播放一首歌曲。我了解大多数需要用户交互才能播放的现代浏览器的自动播放策略。我想问一下如何使用“全局事件监听器”来实现这一点 - 只要用户在页面上执行任何操作（例如移动鼠标），歌曲就会开始。

这是我所拥有的，但它还不起作用：

import Music1 from './song1.mp3'
import Music2 from './song2.mp3'
import React from 'react'
// import Sound from 'react-sound'
import ReactAudioPlayer from 'react-audio-player';


const AudioPlayer = ({ Music }) => {
  if (Music == null) {
    Music = Music1;
  }

  let hasMouse = false;
  console.log ('before move' + hasMouse)
  const hasMouseCheck = () => {
      hasMouse = true;
      // Kill the event listener, so it executes only once
    window.removeEventListener('mousemove', hasMouseCheck, false);
    console.log ('after move' + hasMouse); // this works and it prints 'true' to the console
  };

  window.addEventListener('mousemove', hasMouseCheck, false);
  
  return (


    <>
      {hasMouse && 
      <ReactAudioPlayer
        src={Music}
        autoplay={true}
      preload={'metadata'}
      loop={true}
      />
    }
    </>
    
);

}

export default AudioPlayer;

它不起作用。我也尝试过类似的方法，但没有奏效。

<ReactAudioPlayer 
src={Music}
autoplay={true}
preload={'metadata'}
loop={true}
/>

这个 react 组件是在路由器级别加载的，我已经完成了一个 console.log 来测试 hasMouse 函数是否有效（确实如此）。

<Switch>
 <Route path={["/", "/intro"]} exact>              
  <AudioPlayer Music={Music1} />
 </Route>
</Switch>

当用户与页面交互时，我可以做些什么来播放音乐？

（我读过这个：Is there a way to auto play audio in React without using an onClick event? 但没有回答我的问题）

【问题讨论】：

标签： javascript reactjs browser

【解决方案1】：

你应该使用这个属性

autoPlay={this.state.autoPlay}

并为手柄鼠标处理此状态

onMouseEnter
onMouseMove
onMouseLeave

onMouseEnter={this.enterMouse}
onMouseLeave={this.leaveMouse}

为了这些功能

const enterMouse=()=>{
    setState({
       autoPlay:true
      }    
    }

【讨论】：

谢谢，但这不是问题。问题是即使在 hasMouse 标志从 false 变为 true 之后（这是您想要做的），自动播放也不会开始。问题似乎是别的。