必须加controls属性，否则audio标签不可见；常见问题包括缺少controls、CORS限制、重定向失败、URL未编码、格式兼容性差（需用source提供MP3+OGG双格式）、autoplay需配合muted、服务器须支持Range请求。
直接用 <audio></audio> 标签 + src 指向公网 URL 就能播，但必须加 controls，否则用户看不见播放器。
为什么 src 写了网址却没反应
常见现象：写了 <audio src="https://example.com/song.mp3"></audio>，页面空白、控制台无报错、但就是不显示控件也不加载。
- 根本原因：漏了
controls属性——没有它，<audio></audio>是“不可见”的，不是静音，是彻底没 UI - 路径本身没问题，但服务器返回了 404 或 CORS 错误（比如对方域名没开跨域），浏览器不会主动提示，只让控件灰掉或卡在加载状态
- 部分音频链接是重定向跳转（如网盘直链、短链服务），某些浏览器会拒绝加载重定向后的媒体资源
- URL 中含中文、空格或特殊字符（如
%20）未正确编码，导致请求失败
MP3 链接播不了？先看浏览器是否支持格式
不是所有公网 MP3 都能播。Firefox 默认不支持 MP3 解码，Safari 对 OGG/Opus 更友好。只依赖一个 src 等于放弃部分用户。
- 正确做法：用
<source></source>提供至少两个格式回退，例如 MP3 + OGG -
type属性不能省，且必须写对：audio/mpeg（不是audio/mp3），audio/ogg（不是audio/ogv） - 如果只有 MP3 链接，又想兼容 Firefox，可临时用在线转换服务生成 OGG 版本，或换用 CDN 托管的双格式资源
autoplay 失效？别硬刚浏览器策略
现代浏览器（Chrome 94+、Safari iOS、Edge）默认禁止有声自动播放。即使你写了 autoplay，只要没加 muted，就一定会失败，控制台报 DOMException: play() failed because the user didn't interact with the document first。
立即学习“前端免费学习笔记（深入）”；
- 若真要自动播放，必须同时写
autoplay muted；后续可用 JS 在用户点击后调用audio.unmute()（注意：iOS Safari 不允许运行时解除静音） - 更稳妥的做法：去掉
autoplay，靠controls让用户手动点播 - 用 JS 控制播放时，一定要在
click或touchstart回调里首次调用play()，并.catch(e => console.error(e))捕获 Promise 拒绝
最易被忽略的一点：网络音频链接必须支持 HTTP Range 请求（即服务器返回 Accept-Ranges: bytes）。否则进度条拖动、暂停恢复会失效，甚至部分浏览器直接拒绝加载。用 curl -I https://xxx.mp3 检查响应头，没有 Accept-Ranges 就得换源或配服务器。
