标签必须加controls属性才能显示播放/暂停按钮、音量滑块、进度条和时长；不加则无界面且用户无法操作，即使设autoplay或loop也无效；多格式需按→顺序书写，type必须为标准mime类型。
直接用 <audio></audio> 标签，别绕弯——它原生支持播放、暂停、音量、进度条，且无需任何 JS 就能工作。
为什么 <audio></audio> 标签必须加 controls 属性
不加 controls，音频会静默加载（甚至可能自动播放失败），用户完全无法操作。浏览器不会为你显示任何界面，哪怕你写了 autoplay 或 loop。
- 加了
controls，才会有播放/暂停按钮、音量滑块、进度条和时长显示 - 不加
controls但想控制？只能靠 JavaScript 调用.play()/.pause()，且受用户交互策略限制 - 移动端 Safari 对无
controls的<audio></audio>更敏感，常直接拒绝.play()调用
<source></source> 多格式写法的顺序和 type 值怎么配
浏览器从上到下尝试每个 <source></source>，遇到第一个能解码的就停。顺序错或 type 写错，会导致明明有 MP3 却去加载 OGG 失败，最终 fallback 文本出现。
- MP3 必须放最前：
<source src="song.mp3" type="audio/mpeg"></source> - OGG 次之：
<source src="song.ogg" type="audio/ogg"></source> - WAV 可选（体积大）：
<source src="song.wav" type="audio/wav"></source> -
type值不能简写成"mp3"或"ogg"，必须是标准 MIME 类型 - 如果只提供一个格式（比如只有 MP3），
<source></source>可省略，直接用<audio src="song.mp3"></audio>
自动播放（autoplay）为什么总失败
不是代码写错了，是 Chromium（Chrome、Edge、新版 Opera）、Firefox 和 Safari 全部默认拦截带声音的自动播放。唯一可靠路径：静音 + 自动播放。
- 必须同时写
autoplay muted，缺一不可 - 仅
autoplay→ 大部分桌面浏览器静默失败，控制台报DOMException: play() failed because the user didn't interact with the document first - 仅
muted不加autoplay→ 不会自动播，但用户点一次后可取消静音 - 想“先静音自动播，再让用户点一下开声”？得监听
playing事件后才允许调用.muted = false，但部分浏览器仍会阻止
用 JavaScript 控制时最常踩的三个坑
哪怕 DOM 获取成功、.play() 看似调用了，也可能没声、没反应、或报错。原因往往不在逻辑，而在时机和策略。
-
.play()返回 Promise，必须.catch()捕获拒绝：audio.play().catch(e => console.warn("播放被拒", e)) - 不能在页面刚加载完就立刻
.play()，需等loadedmetadata或至少canplay事件触发后再调 - 不要反复调
.play()—— 如果音频已在播放中，它会抛错；应先判断audio.paused === true再调 - 移动端 iOS Safari 要求首次播放必须由用户手势（如
click、touchend）触发，setTimeout延迟调用也无效
真正麻烦的不是怎么写，而是浏览器策略层层加锁：格式兼容要试、自动播放要静音、JS 播放要守事件时机、移动端还要绑手势。漏掉其中一环，音频就卡在无声状态，而控制台未必报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
