网页中使用 jquery 绑定 hover 音频播放时，常因浏览器自动播放策略限制导致首次 hover 无效，需用户先点击页面才可触发；本文提供兼容性良好的解决方案，确保音频在 dom 加载完成后即可响应悬停事件。
现代浏览器（Chrome、Edge、Safari 等）出于用户体验与性能考虑，普遍实施了自动播放策略（Autoplay Policy）：未经过用户手势（如 click、tap、keydown）激活的 <audio> 元素，其 play() 方法将被静音或直接拒绝执行。这正是你遇到“hover 音频首次不响，必须先点一下页面才生效”的根本原因——尽管 DOM 已加载，但音频上下文尚未获得“用户激活”（user activation）状态。
✅ 正确做法不止是包裹 $(document).ready()（它仅确保 DOM 就绪），更关键的是：在首次用户交互后才启用音频控制逻辑，或采用更健壮的初始化方式。以下是推荐的完整解决方案：
✅ 推荐写法（兼顾兼容性与策略合规）
<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="Interactive element" />
<audio id="audio" preload="auto">
<source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg" type="audio/ogg" />
</audio>
</div>
<script>
$(document).ready(function() {
const audio = $("#audio")[0];
let isActivated = false;
// 第一次用户点击/触摸任意位置，激活音频上下文
$(document).one('click touchstart', function() {
isActivated = true;
});
// hover 逻辑：仅在已激活时执行 play/pause
$("#div4").on('mouseenter', function() {
if (isActivated && audio.readyState >= audio.HAVE_ENOUGH_DATA) {
audio.currentTime = 0; // 重置播放位置，避免卡顿
audio.play().catch(e => console.warn("Audio play prevented:", e));
audio.loop = true;
}
});
$("#div4").on('mouseleave', function() {
if (isActivated) {
audio.pause();
}
});
});
</script>⚠️ 注意事项：
- preload="auto" 提前加载音频资源，减少 hover 延迟；
- 使用 .catch() 捕获 play() 失败（如被策略阻止），便于调试；
- audio.readyState >= audio.HAVE_ENOUGH_DATA 避免在音频未加载完成时调用 play() 导致报错；
- $(document).one(...) 确保只监听首次用户交互，后续 hover 即可自由控制；
- 移动端需同时监听 touchstart（而非仅 click），因部分设备无 click 事件触发。
? 替代方案（轻量级，无需 jQuery）
若项目允许精简依赖，可改用原生 JavaScript + addEventListener，并利用 play() 返回 Promise 的特性做更精准错误处理。
总之，解决该问题的核心不是“何时绑定事件”，而是“何时获得用户激活权限”。将音频控制逻辑与明确的用户手势解耦，并做好降级提示（如静音图标、文字提示），才是符合现代 Web 标准的专业实践。
