<audio>: 音频标签
最后更新：2026-10-13
<audio>音频标签
用于在页面中嵌入音频播放器，常配合 source 提供多种格式以保证兼容。
| 分类 | 链接与媒体 |
|---|---|
| 内容模型 | 嵌入内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </audio> 标签 |
| 状态 | 标准 |
📝 语法
<audio controls>音频内容</audio>⚙️ 属性
该元素支持全局属性及以下专有属性：
| 属性 | 值 | 描述 |
|---|---|---|
src | 音频文件 URL（单文件时可用，多格式用 source）。 | |
controls | 显示播放/暂停、音量等控件。 | |
autoplay | 页面加载后自动播放（多需配合 muted）。 | |
loop | 播放结束后循环。 | |
muted | 默认静音。 | |
preload | 预加载策略：none/metadata/auto。 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <audio> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 加 controls 才显示播放控件；自动播放通常需配合 muted 才能生效（浏览器策略限制）。
❓ 常见问题
Qaudio 怎么自动兼容多种格式？
A放多个
<source>，浏览器按顺序选第一个能播放的：<source src='a.ogg'><source src='a.mp3'>。推荐至少提供 mp3（兼容性最广）+ ogg/opus（开放格式），全部不支持时显示标签内的回退文字。Qaudio 的 autoplay 为什么经常不生效？
A浏览器有自动播放策略：带声音的媒体要求用户先与页面有交互，否则被拦截。可行方案：静音自动播放（
autoplay muted）必然放行；或监听首次交互事件后再调用 audio.play()。Qaudio 标签里能写什么内容？
Asource 子元素 + 回退内容：
<audio controls><source src='a.mp3'>您的浏览器不支持音频播放。</audio>。回退文字在不支持 audio 的环境中显示，现代浏览器几乎不会看到它，但保留是好习惯。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
