应先创建audio元素并设preload="none"，再动态赋值src并监听error；用按兼容性降序声明多格式（MP3优先）；结合CSS.supports和matchMedia预判播放行为；监听stalled/waiting而非仅error，且在loadstart后绑定事件。

用 的 src 属性而非内联 src 属性值

直接写 看似简洁，但浏览器可能在解析完标签前就发起请求，若资源 404 或跨域失败，error 事件无法可靠捕获。更鲁棒的做法是先创建元素、设置 preload="none"，再动态赋值 src 并监听 error：

• 避免 DOM 渲染即触发加载，防止静默失败
• 确保 error 事件可绑定（部分浏览器对已开始加载的 不触发该事件）
• 配合 crossorigin 属性处理 CORS 场景，否则 error 可能被静默吞掉

提供多格式 source 且按浏览器支持顺序排列

不要只靠 单源 fallback，而要用 显式声明多个格式，并把兼容性最广的放最前（如 MP3），再跟 WebM、OGG：

• MP3 在所有现代浏览器中支持最稳定，应作为第一候选
• WebM（Opus）适合需要高音质+低带宽的场景，但 Safari 旧版不支持
• OGG（Vorbis）在 Firefox/Chrome 表现好，但 iOS Safari 完全不支持
• 浏览器只会加载第一个它能解码的 ，后续忽略，所以顺序 = 降级策略

用 CSS.supports('animation-timeline', 'auto') 和 matchMedia('(prefers-reduced-motion: reduce)') 做播放行为预判

音频 UI（如波形动画、播放进度视觉反馈）不是纯装饰——它可能掩盖真实播放状态。若用户启用了“减少动画”，或设备内存紧张（navigator.deviceMemory ），应主动禁用 JS 驱动的可视化，避免卡顿或误判：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• CSS.supports('animation-timeline', 'auto') 可判断浏览器是否支持时间线驱动动画，避免在不支持环境硬上 @keyframes
• matchMedia('(prefers-reduced-motion: reduce)') 比监听 reduce-motion CSS 类更早介入，可在 play() 前就关闭 canvas 波形绘制
• 搭配 requestIdleCallback 调度非关键帧更新，避免和音频解码争抢主线程

监听 stalled 和 waiting 而不只是 error

音频加载失败不止发生在初始阶段。error 只覆盖严重错误（如 404、CORS），但网络抖动、缓冲区耗尽、服务端流中断等会触发 stalled（请求卡住）或 waiting（等待更多数据）：

• stalled 通常意味着资源不可达或服务器无响应，应考虑切换备用 URL 或提示“网络异常”
• waiting 是正常缓冲行为，但若持续超 5 秒，大概率是带宽不足，可降级到低码率源（需提前准备 ）
• 务必在 loadstart 后才绑定这些事件，否则可能错过首次触发

真实鲁棒性不体现在“能播”，而在于“播不了时知道为什么、还能做什么”。很多音频交互崩坏，是因为把 play() 当作黑盒调用，却没处理它返回的 Promise 拒绝、没监听缓冲事件、也没为低性能设备预留退路。这些点漏掉任意一个，都可能让“点击即播”变成“点十次才响”。

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