HTML5 标签最简结构需含 controls 属性和至少一个 ，并提供 src 与 type；自动播放须满足用户交互、muted 静音或浏览器授权；移动端需显式手势触发 play()，且应始终带 controls 并设计降级方案。
HTML5 的 <audio></audio> 标签能直接嵌入音频，但“能用”不等于“好用”——浏览器兼容性、自动播放限制、移动端行为差异，才是实际开发中最常卡住的地方。
怎么写最基础的 <audio></audio> 标签
最简结构只需 <audio></audio> 包裹一个 <source></source>，并提供 src 和 type：
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </audio>
要点说明：
-
controls属性必须加，否则默认无界面（连播放按钮都没有） - 多个
<source></source>是为兼容不同解码器，浏览器按顺序试加载，遇到第一个能播的就停 - MP3 在所有主流浏览器都支持，
.ogg主要用于 Firefox 旧版本或需要免版权场景 - 结尾的提示文字不是可选的“装饰”，它是当所有
<source></source>都失败时的降级内容
为什么加了 autoplay 却不自动播放
这是当前最普遍的困惑。现代浏览器（Chrome、Safari、Edge、Firefox）全部默认禁止有声音的自动播放，除非满足以下任一条件：
立即学习“前端免费学习笔记（深入）”；
- 用户已与页面有过交互（比如点过任意位置）后再调用
play() - 音频被设为静音：
autoplay muted（注意：必须同时写两个属性） - 用户在浏览器设置中手动允许了该站点的自动播放（极少数）
所以这段代码大概率失效：
微信公众号文章生成技能（专业版）
下载
name wechat-article-writer-pro description 微信公众号文章完整生成技能（专业版）。输入主题即自动完成：信息调研、文章撰写（含章节配图）、5个备选爆款标题、封面图生成、带格式排版的DOCX文档输出。触发词：写公众号文章、生成公众号内容、做微信推文、公众号文章完整版。 agent_created true 微信公众号文章完整生成技能（专业版） 概述 本技能提供微信公众号文章从主题到成品的完整生成流程，在基础版之上增加：章节配图、DOCX 格式输出（含彩色重点文字和表格
<audio autoplay src="bgm.mp3"></audio>
而这段才可能生效：
<audio autoplay muted controls src="bgm.mp3"></audio>
<audio></audio> 的常用属性和 JS 控制要点
纯 HTML 只能做基础控制；真要实现播放逻辑（如切换歌曲、监听进度、错误重试），必须靠 JavaScript。
关键属性与对应 JS 行为：
-
preload="auto"：提示浏览器预加载音频（但实际是否加载由浏览器决定，移动端常忽略） -
loop：循环播放，JS 中对应audio.loop = true -
muted：静音，JS 中改audio.muted = true可绕过自动播放限制 -
volume：取值 0.0–1.0，但部分安卓 WebView 不支持动态调节 - 监听播放状态用事件：
play、pause、ended、error（注意：出错时error事件只触发一次，且audio.error是个对象，需查audio.error.code）
移动端和微信内置浏览器的特别坑
iOS Safari 和微信 Android（X5 内核）对 <audio></audio> 有额外限制：
- iOS 上，
play()必须在用户手势回调中调用（onclick、ontouchstart），不能放在setTimeout或异步请求回调里 - 微信中，部分安卓机型会把
<audio></audio>当作“背景音乐”接管，导致页面切到后台后继续播，但无法用 JS 控制暂停 - 没有
controls的<audio></audio>在 iOS 上完全不可见、不可控，哪怕 JS 调用play()也无效 - 推荐方案：始终带
controls，首次播放用显式按钮触发，后续再用 JS 管理；避免依赖自动播放做核心功能
真正难的不是写对标签，而是判断当前环境是否允许你执行想要的操作——每次加音频前，先想清楚：这个播放动作，是用户主动触发的吗？有没有备选静音方案？移动端出错时有没有 fallback 提示？
