我想播放一首歌曲，一旦用户在我的应用程序的登录页上移动鼠标。我知道大多数需要用户交互才能播放的现代浏览器的自动播放策略。我想问一下如何通过“全局事件侦听器”实现这一点——只要用户在页面上做任何事情（例如移动鼠标），歌曲就会开始。

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

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}
/>

这个反应组件是在路由器级别加载的，我已经做了console.log来测试hasMouse函数是否工作（确实如此）。

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

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

（我读过这个：有没有一种方法可以在React中自动播放音频，而不使用onhtml事件？但不回答我的qn）