link 标签不能用于播放或嵌入音频，仅支持 rel="preload" as="audio" 预加载；必须用 audio 标签实现播放控制，配合 source 提供多格式回退，并确保 controls 属性启用。
link 标签不适用于音频文件关联
<link> 的设计用途是声明当前文档与外部资源的关系，比如样式表（rel="stylesheet"）、图标（rel="icon"）、预加载（rel="preload"）等。它**不能用来播放或嵌入音频**，浏览器也不会因 <link rel="audio">（该值非法）而加载、识别或提供播放控制。
正确加载和播放音频该用 audio 标签
要让音频可播放、可控制、可访问，必须使用 <audio></audio> 元素：
-
src属性指定音频路径，支持.mp3、.wav、.ogg等常见格式 - 加上
controls属性才能显示原生播放控件（播放/暂停、音量、进度条） - 可选
preload控制预加载行为："auto"（预加载全部）、"metadata"（仅元数据）、"none"（不预加载） - 多个
<source></source>可提供不同格式回退，提升浏览器兼容性
<audio controls preload="metadata"><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </source></source></audio>
如果真想“预加载”音频而不立即播放，用 link rel="preload"
这是唯一合法且实用的 <link> 与音频相关的用法：提前触发下载，避免播放时卡顿。但注意：
- 必须设
as="audio"，否则浏览器无法正确设置请求头和缓存策略 -
href必须指向真实音频文件路径，且格式需与后续<audio></audio>中一致 - 它只是预加载，**不会自动播放，也不影响 DOM 渲染或交互逻辑**
- 不支持跨域资源（除非音频服务端返回
Access-Control-Allow-Origin）
<link rel="preload" href="bgm.mp3" as="audio">
容易踩的坑
实际开发中常见错误包括：
- 误写
<link rel="audio" href="xxx.mp3">——rel="audio"不是标准值，被忽略 - 用
<link rel="preload">但漏掉as="audio"，导致预加载失效或 MIME 类型不匹配 - 在
<audio></audio>中只写src却没加controls，用户找不到播放入口 - 音频路径为相对路径时，未确认其相对于 HTML 文件的位置，404 静默失败
- 依赖单一格式（如只提供 MP3），在 Firefox 或旧版 Safari 中无法播放
真正需要音频功能时，<audio></audio> 是不可替代的载体；<link> 唯一能帮上忙的，就是用 rel="preload" as="audio" 提前拉取资源 —— 但前提是已经写了正确的 <audio></audio> 标签并准备调用它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
