网站跨页面JS Audio对象无法正常播放问题求助

问题根源 #

你之前尝试传入多路径参数的方式无效，因为Audio构造函数仅会读取第一个参数作为音频文件路径，后续参数会被直接忽略。而相对路径（如assets/audio/error.mp3）是基于当前页面的URL解析的，子目录页面的层级不同，解析后的路径自然指向错误位置。

以下是三种可行的解决方法：

方法1：使用根相对路径（最简单直接） #

路径以/开头，强制从网站根目录开始寻址，无论页面在哪个子目录下，都能精准定位到音频文件。

// 创建音频元素，使用根相对路径
let audio = new Audio("/assets/audio/error.mp3");
audio.play();

方法2：动态基于JS文件路径构建音频地址 #

利用当前JS文件（assets/js/core.js）的路径，动态推导音频文件的位置，适合目录结构可能变动的场景。

// 获取当前core.js脚本的完整URL
const currentScript = document.querySelector('script[src*="core.js"]');
const scriptFullPath = currentScript.src;
// 提取assets目录的根路径（移除/js/core.js后缀）
const assetsRoot = scriptFullPath.replace("/js/core.js", "");
// 拼接音频文件路径
const audioPath = `${assetsRoot}/audio/error.mp3`;

let audio = new Audio(audioPath);
audio.play();

方法3：全局变量统一管理路径 #

在网站公共HTML头部（所有页面都会引入的部分）定义全局路径变量，JS中直接调用，便于统一维护。

公共HTML头部添加：

<script>
  // 全局存储音频资源根路径
  window.ASSETS_AUDIO_PATH = "/assets/audio/";
</script>

core.js中使用：

let audio = new Audio(`${window.ASSETS_AUDIO_PATH}error.mp3`);
audio.play();

内容的提问来源于stack exchange，提问作者Lil_PhyziX