GitHub Pages项目音频文件路径错误致404求助

问题根源 #

JavaScript中new Audio()的路径是相对于当前页面的URL解析的，而非JS文件的位置——这和CSS中路径相对于CSS文件解析的规则完全不同。你的页面index.html在仓库根目录，部署后页面URL为https://milfords.github.io/js-dev-final-capstone-starter-simon-says/，而JS文件存放在js/文件夹下，之前写的../assets/xxx.mp3会被解析为从页面URL向上跳一级（即到https://milfords.github.io/）再查找assets文件夹，自然会返回404。而CSS文件在css/文件夹下，../assets/xxx是相对于CSS文件位置解析，指向仓库根目录的assets，所以图片能正常加载。

解决方案 #

以下两种写法均可适配本地开发和GitHub Pages部署环境：

1. 相对于页面根目录的相对路径（推荐，无需修改路径适配不同环境）
   因为页面在仓库根目录，直接写从页面出发到音频文件的路径：

   const winner = new Audio('./assets/winner-winner-sound.mp3');
   // 或者省略./，效果一致
   const winner = new Audio('assets/winner-winner-sound.mp3');
   

   对象属性中的对应写法：

   sound: new Audio('assets/simon-says-sound-1.mp3')
   

2. 项目站点绝对路径
   直接适配GitHub Pages项目站点结构的完整根路径：

   const winner = new Audio('/js-dev-final-capstone-starter-simon-says/assets/winner-winner-sound.mp3');
   

验证方法 #

修改后重新部署，打开Chrome开发者工具的Network标签，查看音频文件的请求URL，确认是否指向https://milfords.github.io/js-dev-final-capstone-starter-simon-says/assets/xxx.mp3，若路径正确则问题解决。

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