鼠标悬停触发音频需先点击页面，如何实现直接触发？

当前你的代码实现了鼠标悬停播放循环音频，但必须先点击页面才能生效，这是因为现代浏览器的自动播放策略：浏览器会拦截非用户主动交互触发的音频/视频播放，必须先通过用户的一次主动操作（比如点击、触摸、鼠标移动）获取播放权限。

下面是修改后的代码，能让悬停功能直接生效：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div4">
  <img src="image.png" width="262" height="262" alt=""/>
  <audio id="audio">
    <source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
  </audio>
</div>

<script>
var audio = $("#audio")[0];
var hasPermission = false;

// 监听首次用户交互，提前获取播放权限
$(document).one("mousedown mouseover touchstart", function() {
  if (!hasPermission) {
    // 触发静音播放来获取权限，不会产生声音
    audio.muted = true;
    audio.play().then(() => {
      hasPermission = true;
      audio.pause();
      audio.currentTime = 0;
      audio.muted = false;
    }).catch(() => {}); // 忽略可能的兼容错误
  }
});

$("#div4").mouseenter(function() {
  if (hasPermission) {
    audio.play();
    audio.loop = true;
  }
});

$("#div4").mouseleave(function() {
  audio.pause();
});
</script>

原理说明： #

1. 用$(document).one()监听页面的首次用户交互（鼠标按下、鼠标移入、触摸开始），确保只执行一次权限获取操作。
2. 通过静音播放音频的方式，让浏览器认为已经有用户主动操作，从而解锁后续的播放权限，这个过程不会产生任何声音。
3. 之后用户鼠标悬停#div4时，就能直接触发音频播放，不需要提前点击页面。

内容的提问来源于stack exchange，提问作者timbukto