音视频标签必须添加 controls 属性才能显示控件并支持用户交互；仅写 或 不会渲染任何内容。
不加 controls 属性，音视频就等于没放——用户看不见、点不了、连加载状态都无从判断。
audio 和 video 标签必须带 controls 才能交互
只写 <audio src="bgm.mp3"></audio> 或 <video src="demo.mp4"></video>，页面上什么都不会显示。浏览器解析了，但不渲染控件，也不暴露播放接口。这不是 bug，是规范行为。
必须显式加上 controls（布尔属性，无需赋值）：
<audio src="bgm.mp3" controls></audio><video src="demo.mp4" controls width="640" height="360"></video>
- 不加
controls，JS 调用.play()也可能失败——因为浏览器认为“用户未主动触发”，尤其在移动设备或 Chrome/Safari 新策略下 -
controls是唯一能让用户立刻操作的最低门槛；想隐藏控件做自定义 UI？可以，但得先确保元素已加载完成、且有用户手势上下文（比如 click 后再调.play()） - 移动端 Safari 对
controls的样式支持有限，别指望用 CSS 完全重绘原生按钮，不如直接用 JS + 自定义 DOM 控制
多格式回退必须用 ，type 属性不能错
只放一个 .mp3 文件，在 Firefox 里大概率静音或报错；只放 .ogg，Safari 可能直接不识别。浏览器按 <source></source> 顺序选第一个能解码的，但前提是 type 值合法。
正确写法：
<audio controls><source src="song.mp3" type="audio/mpeg"><source src="song.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </source></source></audio>
-
type="audio/mp3"是无效值，必须是audio/mpeg（MP3）、audio/ogg（OGG）、audio/wav（WAV） - 路径必须可访问：本地双击 HTML 打开时，
file://协议下 Chrome/Firefox 会拦截跨源请求，音频 404 且控制台报ERR_FAILED；用python -m http.server起个本地服务更可靠 - 文件名大小写敏感：Linux/macOS 服务器上
song.MP3≠song.mp3，路径写错就 404
autoplay 必须配 muted，否则 Chrome/Safari 直接禁播
写 <audio src="intro.mp3" autoplay></audio>，现代浏览器几乎肯定不响——不是卡了，是策略级拦截。Chrome 自 2017 年起、Safari 自 2018 年起，均要求自动播放内容必须静音。
唯一合规写法是加 muted：
<audio src="intro.mp3" autoplay muted loop></audio>
-
muted和autoplay必须同时存在，缺一不可 - 即使后续用 JS 解除静音（
audio.muted = false），也得等用户有交互（如点击）后才允许；否则仍被拒绝 - 想实现“用户点击后自动播放下一首”？监听
click，然后调audio.play()，不要依赖autoplay回滚逻辑
JS 控制播放前必须检查加载状态
直接 document.getElementById('bgm').play() 很容易报错 DOMException: The element has no supported sources 或 Failed to load because no supported source was found——说明音频还没加载完，或 src 路径根本无效。
安全做法是监听 canplay 或 loadeddata 事件：
const audio = document.getElementById('bgm');
audio.addEventListener('canplay', () => {
audio.play().catch(e => console.warn('自动播放被阻止:', e));
});
-
canplay表示已有足够数据开始播放（推荐）；loadeddata表示第一帧已加载（更早，但可能不够） - 所有
.play()调用都应包在try/catch中，错误对象是DOMException，不是普通 Error - 如果音频是动态设置
src（比如换歌），记得每次改完都重新监听加载事件，不能只绑一次
最常被跳过的其实是路径和协议问题：本地开发时双击 HTML，file:// 下一切音频视频请求都会被拦；以为代码错了，其实是环境没配对。这点比语法细节更致命。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
