通过使用绝对路径而非相对路径初始化 audio 对象，可解决因页面嵌套层级不同导致的音频资源加载失败问题，确保所有子目录下的页面都能正确播放同一音频文件。
通过使用绝对路径而非相对路径初始化 audio 对象，可解决因页面嵌套层级不同导致的音频资源加载失败问题，确保所有子目录下的页面都能正确播放同一音频文件。
在多页面网站中，JavaScript 中直接使用相对路径（如 "assets/audio/error.mp3"）创建 Audio 实例时，浏览器会以当前 HTML 页面的 URL 为基准解析该路径。例如：
- 在
https://example.com/index.html中，"assets/audio/error.mp3"解析为https://example.com/assets/audio/error.mp3✅ - 但在
https://example.com/company/contact.html中，它会被解析为https://example.com/company/assets/audio/error.mp3❌（路径错误，404）
你尝试传入多个路径（如 new Audio("a.mp3", "../b.mp3", "../../c.mp3")）是无效的——Audio 构造函数只接受单个字符串参数，多余参数会被忽略。
✅ 正确解法：使用协议+域名+完整路径构成的绝对 URL：
const audioUrl = `${window.location.origin}/assets/audio/error.mp3`;
const audio = new Audio(audioUrl);
audio.play().catch(e => console.warn("Audio playback failed:", e));?
window.location.origin等价于location.protocol + '//' + location.host，更简洁且兼容性良好（IE10+ 支持），自动适配http://、https://及端口（如:3000）。立即学习“Java免费学习笔记（深入）”；
? 注意事项：
- 音频自动播放受浏览器策略限制（需用户交互后触发），若在非用户手势（如
click、keydown）上下文中调用play()，可能抛出NotAllowedError。建议将audio.play()绑定到按钮点击等显式交互事件中； - 确保
assets/audio/error.mp3文件实际存在于 Web 服务器根目录下的对应路径（即可通过https://yoursite.com/assets/audio/error.mp3直接访问）； - 如项目部署在子路径（如
https://yoursite.com/myapp/），应使用window.location.pathname动态计算基础路径，或配置公共静态资源前缀（推荐通过构建工具统一处理）。
综上，统一使用 origin + 基础路径 构建音频 URL，是实现跨目录稳定播放的简洁、可靠方案。
