audio标签最低需controls和src，但仅此二者会导致移动端卡顿、iOS点击失效、Firefox报错；优化需协同浏览器策略、服务端响应（如Accept-Ranges: bytes）、JS控制（如load()与canplaythrough事件）三方面。
audio 标签加 controls 和 src 是最低可用门槛，但只写这两项，90% 的音频在移动端会卡顿、iOS 上点不动、Firefox 里直接报错——优化加载不是“多加个属性”就能解决的事，得拆开看浏览器策略、服务端响应和 JS 控制三个层面。
为什么写了 preload="auto" 却没网络请求
因为 preload="auto" 在多数浏览器里只是摆设：iOS Safari 直接忽略，Chrome 在省电/低数据模式下强制降级为 metadata，微信 X5 内核基本不认。更关键的是，它只在 HTML 初始解析时生效——如果 src 是 JS 后续动态设置的，preload 就完全失效。
-
preload是弱提示，不是指令；合法值只有none、metadata、auto，其他写法（如"true"）等同于none - 元素未挂载到 DOM（比如还在
DocumentFragment中，或父容器display: none），preload不触发任何请求 - 服务端响应头缺失
Accept-Ranges: bytes，浏览器无法用 HEAD 请求探查元信息，metadata模式也会失败或退化为整文件下载
preload="metadata" 怎么用才真正生效
这是最平衡的起点：只拉取时长、采样率、封面等头部信息，不下载音频帧，速度快、省流量、兼容性好。但它依赖服务端支持，且必须配合正确写法。
- HTML 中写
<audio preload="metadata" controls><source src="song.mp3" type="audio/mpeg"></source></audio>，别写auto或空字符串 - 确保服务端返回
Accept-Ranges: bytes响应头（用curl -I https://yoursite.com/song.mp3验证） -
type属性不能省，audio/mp3是非法值，必须是audio/mpeg（MP3）、audio/ogg（OGG） - 如果
audio.duration仍是NaN，说明元数据没拿到，可检查audio.buffered.end(0)是否可读——它只在元数据就绪后有效
关键音效必须用 JS 主动 load()
对提示音、按钮反馈这类延迟敏感的资源，仅靠 HTML 属性不可控。得用 JS 强制初始化，并监听真正可用的状态。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 先设
preload="none"，再赋值src，然后立即调用.load()，否则浏览器可能跳过加载 - 监听
canplaythrough事件（表示缓冲足够、后续播放不会卡顿），比loadedmetadata更贴近真实可用状态 - 若已进入
loadedmetadata状态，再次.load()不会重发请求；需先清空src再重设 - 示例：
const audio = new Audio('alert.mp3'); audio.preload = 'none'; audio.src = 'alert.mp3?ts=' + Date.now(); audio.load(); audio.addEventListener('canplaythrough', () => console.log('可随时播放'));
怎么让音频资源更早进缓存
<link rel="preload"> 比 preload 属性更可靠，它让浏览器在解析 HTML 阶段就发起请求，不受元素是否渲染、是否在视口影响。
- 写法：
<link rel="preload" href="click.mp3" as="audio" type="audio/mpeg"> - 只支持同域资源；不会自动解码，但能显著缩短首次
play()的等待时间 - 搭配 JS 使用效果更好：
const audio = new Audio('click.mp3'); audio.play();——此时资源大概率已在缓存中 - 注意缓存策略：
Cache-Control: no-cache会让预加载失效，建议用immutable+ 长期哈希文件名
真正决定加载快慢的，从来不是 preload 属性本身，而是服务端是否支持 Range 请求、JS 是否在合适时机调用了 .load()、以及是否用 <link rel="preload"> 抢占了资源队列——这三个点漏掉任何一个，优化就只做了三分之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
