用标签插入音频需设src属性指向有效文件并添加controls显示控件；推荐用多个提供MP3、OGG等多格式fallback，确保跨浏览器兼容。
怎样用 <audio></audio> 标签插入可播放的音频
直接用 <audio></audio> 标签就能在网页里嵌入原生音频，不需要额外 JS 或插件。浏览器原生支持 MP3、WAV、OGG 三种主流格式，但兼容性有差异——MP3 在所有现代浏览器都可用，<audio></audio> 默认不自动播放，也不显示控件，得手动加属性。
基础写法是：
<audio src="music.mp3" controls></audio>
关键点：
-
src必须指向可访问的音频文件路径（相对或绝对），404 会导致静音且无提示 -
controls是布尔属性，加上才显示播放/暂停/音量等 UI；不加就完全不可见、不可操作 - 推荐把
<source></source>标签写在<audio></audio>内部，而不是只靠src，这样能提供多格式 fallback
为什么 <audio></audio> 加了 src 还是没声音
常见原因不是代码写错，而是资源加载失败或策略限制：
- 路径错误：检查浏览器开发者工具 Network 面板，看
music.mp3是否返回 200；本地双击 HTML 打开时，file://协议下部分浏览器会阻止音频加载 - 跨域问题：如果
src指向其他域名，服务器必须返回Access-Control-Allow-Origin: *，否则 Chrome 会静默失败，控制台报Failed to load resource: net::ERR_FAILED - 自动播放限制：Chrome 等浏览器禁止无用户交互（如点击）触发的自动播放，即使写了
autoplay，也大概率被忽略；加muted可绕过部分限制，但对纯音频意义不大
用 <source></source> 提供多格式支持的实际写法
不同浏览器对编码格式支持不一：Safari 偏爱 MP3，Firefox/Chrome 更倾向 OGG，所以一个 <audio></audio> 块里塞多个 <source></source> 是稳妥做法，浏览器按顺序试播第一个能解码的。
<audio controls> <source src="music.ogg" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
注意：
-
type属性必须写准确，audio/ogg和audio/oga不等价，后者可能被忽略 - 文本“您的浏览器不支持…”是 fallback 内容，仅当所有
<source></source>都失败时才显示 - 不要在
<audio></audio>上同时写src和<source></source>，后者优先，前者会被忽略
<audio></audio> 的常用属性和它们的真实效果
除了 controls 和 src，几个属性容易误解：
-
preload：可选"none"（不预加载）、"metadata"（只加载时长/封面等元信息）、"auto"（全量预加载）。移动端 Safari 默认忽略auto，强制为metadata，避免浪费流量 -
loop和muted是布尔值，写上即生效，无需=true；但muted对纯音频几乎没用，因为没声音本来就是静音状态 -
crossorigin：仅当音频跨域且需 JS 操作（如读取音频数据）时才需要设为"anonymous"；单纯播放不用加
音频文件体积大时，preload="none" 能减少首屏加载压力，但用户点击播放后会有明显延迟——这个权衡点常被忽略。
