audio标签必须加controls属性才能显示控件，否则浏览器不渲染播放器界面；缓冲进度可视化需结合preload="metadata"、监听loadedmetadata和timeupdate事件，并用buffered计算实时百分比。
audio标签必须加controls才能显示控件，否则缓冲进度不可见
不加 controls 属性，浏览器压根不渲染播放器界面——没有进度条、没有时间显示、没有缓冲指示，哪怕音频已加载 80%，用户也看不到任何反馈。这不是 bug，是规范行为：HTML5 要求显式声明“我要展示控件”，否则 audio 元素默认隐形且不可交互。
常见错误是只写 <audio src="song.mp3"></audio>，以为 autoplay 或 JS 控制就够了。结果测试时发现：桌面端点不动、移动端完全没反应、缓冲状态无从得知。加 controls 是所有后续可视化的前提。
- 必须写成
<audio src="song.mp3" controls></audio>（controls是布尔属性，无需赋值） - 若需自定义 UI（比如隐藏原生控件），则必须用 JS 手动实现进度条，并监听
buffered和timeupdate—— 不能跳过这一步直接“假装有进度” - 移动端 Safari 对无
controls的 audio 更敏感：即使 JS 绑定了 click，也可能因未触发完整播放上下文而拒绝渲染或静音
用buffered计算缓冲进度比waiting/canplay事件更可靠
waiting 和 canplay 是瞬时事件，容易漏判或误判；而 audio.buffered 是实时可读的 TimeRanges 对象，能算出确切已缓百分比，适合驱动进度条动画。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
关键点在于：不能直接用 buffered.length === 0 判断“没缓”，某些浏览器（如 Chrome 128+）在刚加载时就返回一个空 range；得结合 readyState （即未到 <code>HAVE_METADATA）一起判断。
- 安全计算方式：
const bufferedEnd = audio.buffered.length > 0 ? audio.buffered.end(0) : 0;，再除以audio.duration（注意：duration 可能为NaN，需等loadedmetadata后才稳定） - 更新频率建议设为
timeupdate事件 + 每 200ms 节流一次，避免高频重绘卡顿 - 首次初始化应在
loadedmetadata后立即执行一次，否则进度条可能延迟半秒才出现
preload="metadata"是缓冲进度可视化的基础配置
如果 preload="none"，首次 play() 才发起请求，此时 duration 未知、buffered 始终为空、readyState 长时间卡在 0，进度条根本无法启动。设为 metadata 才能提前拿到时长和 MIME 类型，让缓冲可视化有起点。
-
preload="metadata"只拉取头信息（约几 KB），不下载音频主体，网络开销极小 - 不要依赖
preload="auto"：它在移动弱网下常退化为metadata，且行为不可预测；Chrome 129 已明确将其视为提示而非指令 - 搭配
crossorigin="anonymous"（尤其 CDN 音频），否则buffered在部分浏览器中会返回空 range
移动端静音策略会让缓冲进度“假完成”
iOS Safari 和 Android Chrome 在页面未获得焦点或 AudioContext 未被手势激活时，即使 buffered.end(0) === audio.duration，调用 play() 仍可能失败，导致进度条走到 100% 却无声、无 playing 事件。这不是缓冲问题，是播放权未获取。
- 解决方案：首次播放前先用
audio.muted = true+play()触发权限，成功后再设muted = false（Safari 17.6+ 要求该流程） - 别只监听
canplaythrough就认为“能播了”：该事件在弱网下可能永不触发，需加 8 秒超时兜底，强制进入播放尝试逻辑 - 缓冲进度条达到 100% 后，必须等
playing事件确认真实播放，再移除 loading 状态；仅靠canplay或readyState === 4不够
buffered 计算错、preload 配错、或移动端权限没走通，进度条就会变成误导用户的“伪信号”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
