p5.js音频可视化项目音频加载失败：一直显示Loading...求助

核心问题：本地绝对路径与浏览器安全限制 #

你在loadSound里使用了本地文件系统的绝对路径（/Users/noah/Desktop/programing/personals/p5_crazyy/fazoland.mp3），浏览器出于安全策略，不允许直接通过file://协议读取本地绝对路径的资源，这是音频加载失败的主要原因。

解决步骤： #

1. 改用相对路径存放音频文件
   将fazoland.mp3移动到你的p5.js项目目录中（比如和sketch.js同级，或新建sounds子文件夹存放），然后修改preload函数中的路径：

   function preload() {
     soundFormats('mp3')
     // 同级目录的写法
     song = loadSound('fazoland.mp3')
     // 如果放在sounds文件夹里的写法
     // song = loadSound('sounds/fazoland.mp3')
   }
   

2. 通过本地服务器运行项目
   p5.js的音频模块必须在HTTP环境下运行，直接打开本地HTML文件会触发安全限制。你可以：

   • 使用p5.js官方编辑器自带的"运行"按钮启动项目；
   • 在项目目录打开终端，用Python启动简易服务器：
     • Python3：python -m http.server
     • Python2：python -m SimpleHTTPServer
       之后在浏览器访问http://localhost:8000；
   • 使用VS Code的Live Server插件一键启动本地服务器。

3. 额外检查项

   • 确认p5.sound.min.js的路径正确，文件确实存在于libraries文件夹中；
   • 测试其他MP3文件，排除音频文件本身损坏的可能。

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