必须由用户真实手势同步触发play()，禁止异步调用；正确做法是将audio.play()严格置于收藏按钮的click或touchstart事件回调最内层，并预加载、校验路径与MIME类型。
收藏按钮点击后播放提示音，必须用用户手势触发 play()
直接在收藏逻辑里调 audio.play() 几乎必然失败，报错 DOMException: play() failed because the user didn't interact with the document first。这不是代码写错了，是浏览器策略强制要求：**有声播放必须由用户真实点击/触摸事件同步触发**，不能延迟、不能异步、不能在定时器或 Promise 回调里调。
正确做法是把 audio 实例和 play() 调用，严格绑定在收藏按钮的 click 或 touchstart 事件回调内：
- 不要提前
new Audio()后存变量再等网络请求完成才播——只要没在用户手势上下文中调play()，就拦 - 如果音频文件较大，建议预加载元数据：
<audio preload="metadata" src="./sound/click.mp3"></audio>，避免点击后卡顿 - 移动端 iOS Safari 更苛刻：首次播放必须带
muted=true，播成功后再取消静音（如需有声）
audio 元素不能写在 HTML 里直接用，得 JS 动态创建或显式控制加载状态
很多人把 <audio src="success.mp3" id="success-sound"></audio> 放在页面底部，以为“页面加载完它就 ready 了”，结果点击收藏时 play() 报错或静默失败。原因在于：src 设置后，浏览器未必已加载足够数据，loadedmetadata 都不一定触发，更别说 canplaythrough。
稳妥方案是手动管理加载流程：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用
const audio = new Audio('./sound/favorite.mp3');创建实例，避免 DOM 查找开销 - 监听
audio.addEventListener('canplaythrough', () => { /* 可安全调 play */ });，比loadeddata更可靠 - 加超时兜底（如 5 秒未就绪则强制
play().catch(() => {})），防止弱网下白等 - 若收藏是异步请求（如发 API），
play()必须放在click回调里，**不能**等fetch().then(() => audio.play())
路径、格式、MIME 缺一不可，否则提示音根本不会加载
收藏音效播不出来，80% 情况不是 JS 问题，而是资源层断链：路径错、格式不被支持、服务端没返回正确 Content-Type。尤其本地开发时用 python -m http.server，默认不设音频 MIME，Chrome/Firefox 就拒绝解码。
检查清单：
-
src必须是相对路径（如"./audio/fav.mp3"）或绝对 URL；"fav.mp3"或"file:///..."在网页中无效 - 至少提供 MP3 + OGG 双格式回退：
<source src="fav.mp3" type="audio/mpeg"><source src="fav.ogg" type="audio/ogg"></source></source> - 打开浏览器 Network 面板，确认音频请求返回状态码 200，且 Response Headers 含
Content-Type: audio/mpeg（MP3）或audio/ogg（OGG） - 别信“本地双击 HTML 能跑”——
file://协议下 Chrome/Firefox 主动禁音频加载，必须起本地服务
移动端收藏音效容易无声，muted 和 AudioContext 状态要分清
iOS Safari 和 Android Chrome 对收藏音效最不友好：即使你绑了 click、用了 canplaythrough、路径也对，第一次点收藏仍可能没声。这不是 bug，是策略限制——**AudioContext 必须在用户手势后首次 resume**。
如果你用 Web Audio API 做更复杂的音效（比如合成提示音），必须额外处理：
- 不要提前
new AudioContext()，等点击收藏按钮时再建 - 建完立刻调
context.resume()，否则后续所有节点都静音 - 原生
<audio></audio>标签虽不依赖 AudioContext，但首次播放仍需该上下文激活，所以muted=true是最简兜底方案 - 测试时务必真机连 DevTools，模拟器常绕过部分策略
真正麻烦的从来不是“怎么写播放代码”，而是浏览器策略、服务端配置、移动端音频上下文激活这三者咬合不上——漏掉任意一环，收藏音效就成哑巴。
