link as="audio" 仅触发预加载，不加载、不解码、不播放音频；需配合 audio 标签或 js 创建实例并用户交互后调用 play() 才能播放。
link as="audio" 不会加载或播放音频
link 标签的 as 属性用于资源提示（resource hint），仅影响预加载行为，不触发实际加载、解码或播放。把 as="audio" 用在 link 上，浏览器不会把它当音频处理，也不会生成 HTMLAudioElement 实例——它连 DOM 元素都不是。
为什么有人误以为 link + as="audio" 能“加载音频”
常见混淆点来自对 preload 和 link rel="preload" 的混用：
- 误把
<link rel="preload" as="audio" href="bg.mp3">当成“提前播放”，其实它只让浏览器提前发起 HTTP 请求并缓存响应体，不解析、不解码、不触发canplay等事件 - 误以为加了
as="audio"就能绕过audio标签的限制（比如 autoplay 策略），但预加载和播放权限完全无关 - 某些调试工具（如 Chrome DevTools 的 Network 面板）显示资源已“loaded”，让人误判为“已就绪可播”，实际仍需手动创建
audio元素并调用play()
真正需要预加载音频时，怎么写才有效
若目标是让音频更快可播（比如用户点击按钮后秒播），link rel="preload" 是可行手段，但必须配合正确用法：
-
href必须指向真实音频 URL，且服务器返回正确的Content-Type（如audio/mpeg） - 必须显式写
as="audio"，否则浏览器按as="fetch"处理，可能不进音频解码流水线 - 不能替代
audio标签：仍需在页面中存在<audio src="bg.mp3" controls></audio>或通过 JS 创建实例 - iOS Safari 对
preload效果有限，建议搭配preload="metadata"在audio标签上使用，避免首屏卡顿
示例：
<link rel="preload" as="audio" href="assets/bg.mp3"><br><audio src="assets/bg.mp3" preload="none" controls></audio>注意：这里
audio 的 preload="none" 是为了不重复请求，靠 link 完成预加载。
容易被忽略的关键约束
即使用了 link rel="preload" as="audio"，以下问题仍会直接导致失败：
- 音频文件跨域但目标服务器没返回
Access-Control-Allow-Origin，预加载会静默失败（Network 面板显示 canceled） -
href路径错误或服务器返回 404，浏览器不报错，但后续audio.play()会抛DOMException: The element has no supported sources - 在没有用户交互的上下文中调用
audio.play()（哪怕资源已预加载），Chrome 94+ 仍会拒绝，必须等click或touchstart后再触发 -
as="audio"不支持 base64 data URL，href 必须是合法 URL
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
