现代浏览器出于用户体验和性能考虑，要求用户与页面进行至少一次交互（如点击）后才允许自动播放音频；本文详解如何通过确保 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()。
因此，推荐采用以下增强方案——添加一个轻量级“激活按钮”，或利用页面首次点击自动解锁音频上下文：
$(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 策略——通过用户首次交互显式解锁媒体能力，后续悬停行为才能稳定触发音频播放。