现代浏览器出于用户体验和性能考虑，要求用户与页面进行至少一次交互（如点击）后才允许自动播放音频；本文详解如何通过确保 dom 就绪、正确初始化音频及处理浏览器 autoplay 策略，实现悬停即播的可靠效果。
在 Web 开发中，常遇到这样一种现象：带有 mouseenter 触发 audio.play() 的悬停音效，在页面刚加载完成时无法立即生效——必须先点击页面任意位置后，悬停才开始奏效。这并非代码逻辑错误，而是受现代浏览器（Chrome、Firefox、Safari 等）严格的 Autoplay Policy（自动播放策略） 所限：为防止骚扰性声音干扰用户，浏览器默认禁止未经用户主动交互（user gesture）触发的音频/视频自动播放。
虽然将事件绑定包裹在 $(document).ready() 中（如下所示）能确保 DOM 加载完成后再注册监听器，避免“元素未找到”类错误，但这本身并不能绕过 autoplay 限制：
$(document).ready(function() {
const audio = $("#audio")[0];
$("#div4").on("mouseenter", function() {
audio.play().catch(e => console.warn("Play prevented:", e));
});
$("#div4").on("mouseleave", function() {
audio.pause();
});
});✅ 正确做法需满足两个前提：
- DOM 就绪：使用 $(document).ready() 或原生 DOMContentLoaded 确保元素已挂载；
- 首次交互解锁媒体：必须由用户显式操作（如点击、触摸、按键）触发一次 audio.play()（哪怕静音），之后 mouseenter 才可正常调用 play()。
因此，推荐采用以下增强方案——添加一个轻量级“激活按钮”，或利用页面首次点击自动解锁音频上下文：
<!-- 在 body 底部添加（非必需，但提升可靠性） --> <button id="audio-init-btn" style="display:none; opacity:0; pointer-events:none;"> 初始化音频 </button>
$(document).ready(function() {
const audio = $("#audio")[0];
let audioUnlocked = false;
// 方案一：监听首次用户点击，解锁音频
$(document).one('click touchstart keydown', function() {
audio.play().catch(e => console.debug("Initial play muted or blocked — OK, context unlocked"));
audioUnlocked = true;
});
// 方案二（备选）：若需更明确控制，可绑定到隐藏按钮并自动点击
// $('#audio-init-btn').click(() => audio.play()).trigger('click');
$("#div4").on("mouseenter", function() {
if (audioUnlocked || audio.readyState >= audio.HAVE_FUTURE_DATA) {
audio.play().catch(e => console.warn("Hover play failed:", e.message));
audio.loop = true;
}
});
$("#div4").on("mouseleave", function() {
audio.pause();
});
});⚠️ 注意事项：
- 避免在 mouseenter 中反复调用 audio.play() 而不检查状态，可能触发重复 Promise 拒绝；
- 始终对 audio.play() 使用 .catch() 捕获拒绝错误（如 "NotAllowedError"），便于调试；
- 若音频资源较大，建议预加载：
- 移动端无真正 hover，应补充 touchstart / touchend 逻辑，或改用点击切换播放状态。
总结：$(document).ready() 是必要基础，但解决“首悬停无声”问题的核心在于尊重浏览器 autoplay 策略——通过用户首次交互显式解锁媒体能力，后续悬停行为才能稳定触发音频播放。
