网页中使用 jquery 绑定 hover 音频播放时，常因浏览器自动播放策略限制导致首次 hover 无效，需用户先点击页面才可触发；本文提供兼容性良好的解决方案，确保音频在 dom 加载完成后即可响应悬停事件。
现代浏览器（Chrome、Edge、Safari 等）出于用户体验与性能考虑，普遍实施了自动播放策略（Autoplay Policy）：未经过用户手势（如 click、tap、keydown）激活的
✅ 正确做法不止是包裹 $(document).ready()（它仅确保 DOM 就绪），更关键的是：在首次用户交互后才启用音频控制逻辑，或采用更健壮的初始化方式。以下是推荐的完整解决方案：
✅ 推荐写法（兼顾兼容性与策略合规）
@@##@@
⚠️ 注意事项：
- preload="auto" 提前加载音频资源，减少 hover 延迟；
- 使用 .catch() 捕获 play() 失败（如被策略阻止），便于调试；
- audio.readyState >= audio.HAVE_ENOUGH_DATA 避免在音频未加载完成时调用 play() 导致报错；
- $(document).one(...) 确保只监听首次用户交互，后续 hover 即可自由控制；
- 移动端需同时监听 touchstart（而非仅 click），因部分设备无 click 事件触发。
? 替代方案（轻量级，无需 jQuery）
若项目允许精简依赖，可改用原生 JavaScript + addEventListener，并利用 play() 返回 Promise 的特性做更精准错误处理。
总之，解决该问题的核心不是“何时绑定事件”，而是“何时获得用户激活权限”。将音频控制逻辑与明确的用户手势解耦，并做好降级提示（如静音图标、文字提示），才是符合现代 Web 标准的专业实践。
