JavaScript音乐播放器静态资源目录无法被浏览器识别的问题求助

问题根源 #

浏览器请求资源时使用的是**相对于页面（index.html）**的路径，而非JavaScript模块文件的路径。你的initializeModifySongsArray.js里用了../../assets/...的相对路径，这是从JS文件所在的src/components目录向上回溯的路径，但实际页面入口index.html和assets是同级目录，导致路径指向错误，触发404。

另外，当前获取音频时长的逻辑存在问题：直接访问Audio.duration会得到NaN，因为音频元数据还未加载完成。

修复步骤 #

1. 修正资源路径 #

把歌曲数组里的mp3Path和coverPath中的../../assets/替换为./assets/，因为index.html与assets目录处于同一层级：

let songs = null;

songs = [
  {
    songName: "Miles Above You",
    singer: "Jesse Warren",
    album: "BreakingCopyright.com",
    mp3Path: "./assets/songs/Jesse Warren - Miles Above You (BreakingCopyright.com).mp3",
    coverPath: "./assets/song-covers/BreakingCopyright_Logo_White_BG.png"
  },
  {
    songName: "Rise",
    singer: "Tubebackr",
    album: "BreakingCopyright.com",
    mp3Path: "./assets/songs/tubebackr - Rise (BreakingCopyright.com).mp3",
    coverPath: "./assets/song-covers/BreakingCopyright_Logo_White_BG.png"
  }
];

2. 修复音频时长获取逻辑 #

修改loadSongsArrayElementsMetadata函数，等待音频元数据加载完成后再获取时长，用Promise封装异步逻辑：

const loadSongsArrayElementsMetadata = async () => {
  await Promise.all(songs.map(async (individualSongElement) => {
    return new Promise((resolve) => {
      const audio = new Audio(individualSongElement.mp3Path);
      audio.addEventListener('loadedmetadata', () => {
        individualSongElement.durationInSeconds = audio.duration;
        resolve();
      });
      // 触发音频加载
      audio.load();
    });
  }));
};

3. 确认服务器根目录 #

确保你的本地服务器（比如Live Server）是把front-end目录作为根目录启动的，而非上级目录。只有服务器根目录指向front-end，./assets/...的路径才能正确定位到资源。

验证修复 #

修改完成后重新运行项目，浏览器会正确请求http://127.0.0.1:5500/assets/songs/...路径下的资源，404错误会消失，同时音频时长也能正常获取。

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