Audio
播放音频内容。中文惯用名：音频播放。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.audio |
| 名称 | Audio |
| 二级分类 | 媒体与内容（media） |
| 用途 | 播放音频内容 |
| 描述 | 中文惯用名：音频播放。 |
预览
静态结构：<audio data-slot="audio">（w-full）；src / controls（默认 true）/ autoplay / loop / muted 透传原生属性。本预览未配置 src，仅展示控制条形态。
DSL 结构
{
"type": "Audio",
"props": {
"src": "https://example.com/meeting-notes.mp3",
"controls": true
}
}何时用
何时使用
- 播放音频内容：播客、录音、语音消息回放。
何时不用
- 视频内容：使用 Video。
- 需要波形 / 进度可视化的专业音频场景：原生 audio 包装不满足，需自建。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 控制条播放 | 原生 controls 全宽条 | 常规音频内容 |
| 循环背景音 | loop + muted 起步 | 氛围音频（谨慎使用） |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | string | — | 音频地址 |
controls | boolean | true | 是否显示原生控制条 |
autoplay | boolean | false | 自动播放（浏览器策略要求同时 muted） |
loop | boolean | false | 循环播放 |
muted | boolean | false | 静音 |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 自动播放必须同时 muted（浏览器策略）。
- 页面最多一个自动播放音频，避免声音竞争。
正例
- ✓ 会议纪要页：录音文件控制条回放。
- ✓ 播客列表项：单集音频内嵌播放。
反例
- ✕ 页面加载即自动播放有声音频（强干扰且被浏览器拦截）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。