加 controls 却无播放按钮，主因是标签未闭合、资源路径错误或跨域/404导致加载失败；autoplay 静默失败系浏览器策略限制，须加 muted 或用户交互后调用 play()；多格式兼容需按 mp3→ogg→wav 顺序+type 属性+fallback 文本。
直接用 <audio></audio> 和 <video></video> 标签就能嵌入，但多数人卡在播放失败、控件不显示、移动端不自动播这三类问题上——核心不是“会不会写标签”，而是是否处理了浏览器策略、格式兼容和事件响应。
为什么加了 controls 却没显示播放按钮
最常见原因是标签没闭合、路径错误，或浏览器根本没加载到音频/视频资源。尤其当 src 指向 404 文件或跨域资源（如本地 file:// 协议打开 HTML）时，<audio></audio> 会静默失败，控件也不渲染。
- 检查浏览器开发者工具的 Network 面板，确认音频/视频文件状态码是 200，且 MIME type 正确（如
audio/mpeg、video/mp4） - 不要只写
<audio src="a.mp3"></audio>，必须显式写<audio src="a.mp3" controls></audio>；自闭合写法<audio src="a.mp3" controls></audio>在部分浏览器中不可靠 - 如果用
<source></source>，确保每个<source></source>都有type属性，否则 Safari 可能跳过该源
autoplay 失败却没报错，怎么排查
现代浏览器（Chrome、Firefox、Safari、Edge）默认拦截带声音的自动播放，即使写了 autoplay，也大概率静默失败。它不会抛 JS 错误，也不会触发 play 事件，只会在控制台输出类似 DOMException: play() failed because the user didn't interact with the document first 的警告。
- 必须同时加
muted属性：例如<video autoplay muted></video>或<audio autoplay muted></audio> - 若需有声自动播放，只能等用户首次交互（如点击、触摸）后再调用
.play()，且要捕获 Promise 拒绝：el.play().catch(e => console.warn("auto play blocked:", e)) - 移动端 WebView（如微信内置浏览器）可能额外限制，即使
muted也需用户手势触发，此时建议放弃自动播放，改用显式按钮
用 JavaScript 控制播放时常见的坑
play() 和 pause() 看似简单，但实际调用时机、状态判断和事件监听稍有偏差就会导致 UI 不同步或重复触发。
-
currentTime设置前，必须等loadedmetadata事件触发，否则读不到duration，设值也可能无效 - 不要用
audio.paused === false判断是否正在播放——更可靠的是!audio.paused && !audio.ended，因为暂停后paused为 true，但播放结束时ended也为 true，二者状态重叠 -
timeupdate事件触发非常频繁（每 200–250ms 一次），别在里面直接更新 DOM 文本，应节流或用requestAnimationFrame包裹 - 多个音频同时播放时，注意浏览器对并发 AudioContext 的限制（尤其 iOS Safari），可复用同一个
Audio实例并切换src，而非反复new Audio()
多格式兼容怎么写才真正有效
只提供 .mp3 是不够的。iOS Safari 对 .ogg 支持差，Firefox 对 .mp3 旧版支持弱，而 Chrome、Edge 已全面支持 .mp3 + .wav + .ogg。关键不在“堆格式”，而在“顺序+type+fallback”三层保障。
- 按浏览器支持广度降序排列：
.mp3（最通用）→.ogg（Firefox/Chrome 开源优先）→.wav（兼容性最老，体积大，仅作兜底） - 每个
<source></source>必须带type，比如<source src="a.mp3" type="audio/mpeg"></source>，漏掉就等于没写 - 在
<audio></audio>或<video></video>标签内部末尾写纯文本 fallback，如您的浏览器不支持音频播放，这是给 IE8 或极旧环境的最后提示 - 别依赖服务器自动推断 MIME type：Nginx/Apache 需显式配置
audio/mpeg、video/mp4等类型，否则返回text/plain会导致加载失败
真正难的不是写出能播的代码，而是让不同设备、不同版本、不同网络环境下都稳定触发播放逻辑——尤其是自动播放被拦截后如何优雅降级，以及 timeupdate 和 ended 这类高频/临界事件的处理节奏。这些细节不调试十几次很难踩准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
