audio标签不支持hover自动播放，需用JavaScript绑定mouseenter事件并调用play()，且必须在用户交互后才能成功；移动端需兼容click/touchstart，并引导首次手动激活。

audio 标签不支持 hover 播放，必须用 JavaScript 控制

HTML 原生 <audio></audio> 没有 onmouseover 自动播放属性，直接写 onmouseover="play()" 会报错——因为 play() 是 DOM 元素方法，不是全局函数。更关键的是，现代浏览器（Chrome、Firefox、Safari）默认禁止自动播放带声音的媒体，除非用户已与页面交互过（比如点过页面任意位置）。

用 addEventListener 绑定 mouseenter，并预加载音频

先确保 <audio></audio> 加了 preload="auto"，否则悬停时首次加载会卡顿或失败；再用 JS 监听 mouseenter，调用 play() 方法。注意：必须在用户触发过交互后才能成功播放（比如页面加载后用户点过一次），否则 Promise 会 reject 并抛出 NotAllowedError。

实操建议：

• 把 <audio></audio> 放在页面底部或用 display: none 隐藏，避免干扰布局
• 用 audio.load() 或设置 preload 提前解码，减少悬停延迟
• 加 .catch(e => console.warn("播放被阻止：", e)) 捕获静音策略拦截
• 示例片段：

  <audio id="hover-audio" src="sound.mp3" preload="auto"></audio>
  <div id="trigger">悬停我</div>
  <script>
  const audio = document.getElementById("hover-audio");
  const trigger = document.getElementById("trigger");
  trigger.addEventListener("mouseenter", () => {
    audio.play().catch(e => console.warn("播放被阻止：", e));
  });
  </script>

移动端没有 hover，得兼容 click/tap

iPhone 和 Android 不触发 mouseenter，悬停逻辑在手机上完全失效。如果目标设备含移动用户，必须同时监听 click（iOS Safari 对 click 有宽松策略）或 touchstart，且最好加一个显式“启用声音”按钮，让用户第一次点击后激活音频上下文。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

常见错误现象：

• PC 上悬停正常，手机点一下没反应 → 没绑定 click
• 手机点第一下没声，第二下才有 → 缺少用户手势激活音频上下文
• 微信内嵌浏览器静音 → 微信强制禁用自动播放，需引导用户手动点一次屏幕

用 Audio API 替代 <audio></audio> 更可控

如果只是播放短提示音（如 1–2 秒），new Audio() 实例比 DOM <audio></audio> 更轻量，支持重复快速触发，且能统一处理加载失败。但要注意：每次 new Audio(src) 都会发起新请求，应缓存实例或复用 buffer。

推荐做法：

• 提前创建 const beep = new Audio("beep.mp3")，悬停时直接 beep.cloneNode().play() 避免冲突
• 对长音频仍用 DOM <audio></audio>，因 Audio API 不支持进度控制和事件监听（如 ended）
• 所有音频资源尽量用 .ogg + .mp3 双格式 fallback，避免 Safari 解码失败

音频自动播放策略越来越严，悬停即播本质是“绕过用户意图”的交互，实际项目中务必确认是否真有必要——多数场景用点击反馈更可靠。