Node.js生成的Audio对象数组无法加载音频轨道问题咨询

核心原因：路径大小写不匹配 #

你手动定义的数组里路径用的是小写的resto/，但通过fs生成的路径是./Resto/（首字母大写）。浏览器对URL路径严格区分大小写，而Node.js在Windows系统下的文件系统默认不区分大小写，这就导致：

• Node.js能正常读取./Resto文件夹里的文件
• 浏览器请求./Resto/xxx.mp3时，服务器找不到对应路径（实际文件夹是小写resto），返回404，自然加载失败

其他可能的辅助原因 #

• 相对路径基准不一致：Node.js的./是相对于当前执行脚本的目录，而浏览器的./是相对于当前页面的URL路径。如果你的页面不在服务器根目录，./Resto会指向错误的位置。
• 文件名特殊字符或空格未处理：虽然控制台显示正常，但部分服务器对带空格的文件名需要URL编码，不过你手动数组里也有空格，所以这个可能性较低。

修复步骤 #

1. 统一路径大小写 #

修改traxFolder的定义，和实际文件夹名、手动数组的路径格式保持一致：

const traxFolder = './resto'; // 改成小写，匹配实际文件夹名和手动数组的路径

同时确保服务器端的文件夹确实是resto（小写），不是Resto。

2. 确保路径符合浏览器的URL规则 #

如果你的音频文件是放在服务器的静态资源目录（比如根目录），建议使用绝对路径，避免相对路径基准问题：

// 生成path时用绝对路径，比如
path: `/resto/${sng}`

这样不管页面在哪个目录，都能正确指向音频文件。

3. 验证路径正确性 #

可以在loadTrack函数里打印最终的src，确认和手动数组的路径完全一致：

function loadTrack(list_index) {
  clearInterval(updateTimer);
  resetValues();
  const trackPath = track_list[list_index].path;
  console.log('加载路径:', trackPath); // 和手动数组的path对比
  curr_track.src = trackPath;
  curr_track.load();
}

如果控制台打印的路径和手动的不一样，就能快速定位差异点。

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