当音频文件名中包含 `%` 字符（如 `test%320.mp3`）时，浏览器会将其误解析为 url 编码序列（如 `%32` → ascii 字符 `'2'`），导致资源加载失败；正确做法是使用 `encodeuri()` 对整个路径进行双重编码，确保 `%` 被安全转义为 `%25`。
在 Web 开发中，<audio> 标签的 src 属性值本质上是一个 URL，因此需严格遵循 URL 编码规范。而 % 是 URL 编码的保留字符——它用于标识十六进制字节序列（例如 %20 表示空格）。若文件名本身含有字面量 %（如 report%final.pdf 或 test%320.mp3），未经处理直接写入 HTML 或 JS 字符串，浏览器会尝试将 %32 解码为字符 '2'，最终实际请求的路径变成 test20.mp3，自然返回 404 错误。
关键区别在于：
- encodeURIComponent() 会编码 /, ?, #, &, = 等所有非字母数字字符，不适用于完整 URL 路径（会破坏协议、域名、路径分隔符）；
- encodeURI() 仅对 URL 中的路径片段进行安全编码，保留 :、/、;、?、&、=、+、# 等 URL 结构字符，专为编码整个 URI 设计，因此是处理含 % 的文件路径的正确选择。
✅ 正确示例：
<audio id="player" controls></audio>
<script>
const rawPath = "test%320.mp3";
const safePath = encodeURI(rawPath); // → "test%25320.mp3"
document.getElementById("player").src = safePath;
</script>⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 不要手动拼接 %25 —— 必须调用 encodeURI()，否则易出错且不可维护；
- 若路径来自用户输入或后端动态生成，务必在赋值给 src 前统一调用 encodeURI()；
- 在服务端（如 Node.js 或 Nginx）也需确保静态文件服务支持解码后的路径（现代服务器默认支持，无需额外配置）；
- 避免使用 unescape()（已废弃）或重复编码（如 encodeURI(encodeURI(...))），会导致过度转义。
? 小结：% 在 URL 中具有特殊语义，不是普通字符。面对 test%320.mp3 这类路径，本质需求是“让 % 作为字面量被传输”，而 encodeURI() 恰好将 % 编码为 %25，使浏览器先解码 %25 得到 %，再将其视为普通字符而非编码起始符——从而准确定位原始文件。这是 URL 编码规范与浏览器解析机制协同作用下的标准解法。
