标签必须加controls属性才显示控件；推荐用多格式兜底；autoplay需配合muted才能静音自动播放；原生控件不可CSS定制；路径、MIME类型、自动播放策略、跨浏览器兼容性是四大易错点。
用 <audio></audio> 标签最直接，但必须带 controls 属性才显示控件
不加 controls，浏览器默认不渲染播放器界面，哪怕音频能自动播放（如果允许的话）。常见错误是只写 <audio src="a.mp3"></audio>，结果页面一片空白。
正确写法示例：
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </audio>
-
controls是布尔属性，写上即启用，不用赋值 - 推荐用
<source></source>多格式兜底，MP3 和 Ogg 组合基本覆盖所有现代浏览器 - 内联文本（如“您的浏览器不支持…”）仅在不支持
<audio></audio>时显示，不是占位符或提示语
Chrome/Firefox/Safari 对自动播放（autoplay）限制很严
即使加了 autoplay，只要没用户手势（比如点击）触发，大多数桌面和移动端浏览器都会静音并暂停播放。这不是 bug，是策略性限制。
- 想“一进页面就播”，得配合
muted—— 静音状态下autoplay才大概率生效 - 例如：
<audio autoplay muted controls>...</audio> - 若需有声自动播放，必须由用户显式交互（如点击按钮）后调用
play()方法 - Safari 对
autoplay更保守，iOS 上甚至静音也不一定放得出来
自定义样式？别碰 controls 的内部结构
浏览器原生控件（播放/暂停/进度条等）无法用 CSS 直接选中并重绘，::-webkit-media-controls 等伪元素已基本被弃用或失效。
立即学习“前端免费学习笔记（深入）”；
- 真要定制外观，得自己用 JS 实现 UI，监听
play、pause、timeupdate等事件，再控制<audio></audio>实例的play()、pause()、currentTime等属性 - 隐藏原生控件：去掉
controls，再用display: none或visibility: hidden无效——它本来就不渲染 DOM 子节点 - 可加
width和height控制容器尺寸，但控件本身大小不可缩放
路径和 MIME 类型写错，控件会显示但点不动
常见现象：控件正常出现，点击播放按钮没反应，控制台也没报错。大概率是 src 路径 404，或服务器返回的 Content-Type 不匹配。
- 检查浏览器开发者工具 Network 标签页，确认音频文件状态码是 200，且 Response Headers 中
Content-Type正确（如 MP3 应为audio/mpeg） - 本地开发用 file:// 协议时，部分浏览器会拒绝加载音频（安全限制），务必起一个本地服务（如
python3 -m http.server） - 不要依赖文件扩展名判断类型，
type属性必须与实际响应头一致，否则 Safari 可能直接忽略该<source></source>
