用实现网页清脆提示音的关键是轻、准、稳：选80–120KB单声道MP3，隐藏标签预加载，首次播放需用户交互触发，播放前重置currentTime，节流防重复，失败时提供视觉fallback。

用 标签实现网页通知的清脆提示音，关键不在标签本身有多“高级”，而在于怎么用得轻、准、稳：不卡顿、不阻塞、不被浏览器拦截，且能适配用户当前状态（比如页面在前台还是后台）。

选对音频文件是第一步

清脆提示音不需要高保真。推荐用单声道、22050Hz 采样率、64kbps 比特率的 MP3，体积控制在 80–120KB 内。太小（如 10KB）可能失真，太大（如 500KB）加载慢、易卡顿。避免用 WAV（体积大）、OGG（兼容性差）、或带元数据的复杂文件。

隐藏 audio 标签 + 预加载更可靠

不要依赖 controls 或 autoplay，它们既不专业也不可控。正确写法是：

• 在 HTML 底部或 中放一个隐藏的 ，不加 controls 和 autoplay
• 用 preload="auto" 或更稳妥的方式——页面加载后立即实例化并调用 .load()（不 .play()），让浏览器后台解码缓存
• 示例：

播放逻辑要防拦截、防重复、分场景

现代浏览器（Chrome/Firefox/Safari）普遍要求「用户交互后」才能播放音频。所以不能在页面一打开就自动响，也不能在 WebSocket 收到消息时直接 .play() —— 很可能被静音或报错。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 首次播放必须由用户点击等交互触发（比如登录后点进聊天页、点开设置页），之后上下文激活，后续 .play() 才大概率成功
• 每次播放前重置时间：audio.currentTime = 0，避免因上次未播完导致静音
• 对连续消息做节流：2 秒内只响一次，用 setTimeout + 标志位控制
• 页面聚焦时可只响音不发 Notification；失焦时再补弹窗 + 播音，体验更自然

失败时要有视觉 fallback

audio.play() 返回 Promise，被阻止时会 reject。不能让它“无声失败”：

• 捕获错误：audio.play().catch(() => { /* 触发标题闪烁、消息气泡抖动、或页面顶部 Toast */ })
• 桌面端可同步修改 document.title，比如加【新消息】前缀，并用 setInterval 交替切换
• Safari 不支持 Notification API？那就完全走页面内提示 + 音频 fallback（前提是已有用户交互）

不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！