p5.js 无法加载本地音频通常源于浏览器的安全策略——直接双击 HTML 文件会以 file:// 协议运行，导致 loadSound() 被跨域限制而卡在“Loading...”。解决方法是启用本地开发服务器，并使用相对路径加载音频文件。
如何在 p5.js 中正确加载和播放本地音频文件实现可视化
在 p5.js 中实现音频可视化（如波形图、频谱分析）时，一个常见却极易被忽视的障碍是：音频文件始终显示“Loading...”，无法加载成功。这并非代码逻辑错误，而是浏览器安全机制所致——当你双击 index.html 直接打开时，页面运行在 file:// 协议下，而现代浏览器（Chrome、Edge、Safari 等）会阻止 p5.sound 库通过 XMLHttpRequest 加载本地音频文件，导致 loadSound() 永远挂起。
✅ 正确做法：必须通过本地 HTTP 服务器提供服务
你不能依赖文件系统路径（如 /Users/noah/Desktop/.../fazoland.mp3），而应将音频文件与项目同目录放置，并启动一个轻量级本地服务器。推荐方式包括：
- macOS 用户：使用 App Store 的 Simple Web Server（一键开启 http://localhost:8000）
- 跨平台通用：终端执行 npx http-server（需先安装 Node.js，运行 npm install -g http-server）
- VS Code 用户：安装插件 Live Server，右键 HTML 文件 → “Open with Live Server”
? 项目结构应为：
your-project/ ├── index.html ├── sketch.js ├── style.css └── fazoland.mp3 ← 与 HTML 同级，不可用绝对路径！
? 修正后的核心代码（sketch.js）：
let song;
let fft;
function preload() {
// ✅ 声明支持格式（可选，但推荐明确指定）
soundFormats('mp3', 'ogg');
// ✅ 使用相对路径 —— 文件名即可，无需前导斜杠或完整路径
song = loadSound('fazoland.mp3');
}
function setup() {
createCanvas(windowWidth, windowHeight);
// ✅ 初始化 FFT 分析器（需在音频加载后调用，但 preload 已确保加载完成）
fft = new p5.FFT();
// ⚠️ 注意：首次播放需用户交互触发（如点击），否则会被浏览器静音策略拦截
}
function draw() {
background(0);
stroke(255);
const wave = fft.waveform(); // 获取时域波形数据（-1 ~ 1）
for (let i = 0; i <p>? 关键注意事项：</p>
- 绝不可使用 file:// 或绝对路径：loadSound('/Users/...') 在浏览器中无效，仅适用于 Node.js 环境（非标准 p5.js 浏览器场景）；
- 音频必须放在服务器根目录下：loadSound('assets/audio.mp3') 也有效，但路径需相对于服务器根目录；
- 首次播放需用户手势：song.play() 必须由 mouseClicked、keyPressed 等事件触发，否则现代浏览器会静音或拒绝播放；
- 调试技巧：在 preload() 中添加 console.log(song) 查看加载状态；若 song 为 undefined 或 isLoaded() 返回 false，说明路径或服务器未生效。
通过以上配置，你的音频可视化将顺利启动——点击画布即可播放 fazoland.mp3，并实时绘制动态波形。这是 p5.js 音频开发的第一道门槛，跨过去，后续 FFT 分析、频谱图、粒子响应等高级效果便水到渠成。
