当音频文件路径中包含 `%` 字符（如 `test%320.mp3`）时，浏览器会将其误解析为 url 编码序列（如 `%32` → ascii 字符 `'2'`），导致资源加载失败；需使用 `encodeuri()` 对整个路径进行双重编码，确保 `%` 被安全转义为 `%25`。
在 Web 开发中，
浏览器会将 %32 解码为字符 '2'，最终尝试请求 test20.mp3 —— 这显然不是目标文件，从而报“404 Not Found”或静音无响应。
✅ 正确做法是：对整个路径字符串调用 encodeURI()（而非 encodeURIComponent()），使其内部的 % 字符被编码为 %25，从而“逃逸”解码逻辑：
const rawPath = "test%320.mp3";
const safePath = encodeURI(rawPath); // 返回 "test%25320.mp3"
// 动态设置 audio 元素
const audio = document.createElement("audio");
audio.src = safePath;
audio.controls = true;
document.body.appendChild(audio);⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- ❌ 不要使用 encodeURIComponent()：它会对 /, :, . 等 URL 保留字符也进行编码（如 test%320.mp3 → test%25320.mp3 ✅，但 ./test%320.mp3 → .%2Ftest%25320.mp3 ❌），破坏路径结构；
- ✅ encodeURI() 仅编码非 URL 安全字符（如空格、#, ?, %），保留 /, :, ., - 等路径分隔符，适合完整 URL 字符串；
- 若路径来自用户输入或动态拼接（如 path + filename），务必在拼接完成后再整体 encodeURI()，避免局部编码引发歧义；
- 在服务端，确保静态资源服务器支持以 %25 开头的文件名（绝大多数现代服务器默认支持，无需额外配置）。
? 小结：% 在 URL 中具有特殊语义，不能作为普通字符裸露出现。通过 encodeURI() 实现“双重编码”（% → %25），可确保浏览器按字面量解析原始文件名。这是处理含 URL 特殊字符（%, #, ?, 空格等）资源路径的通用健壮方案。
