p5.js 音乐可视化完整指南：从波形到频谱柱的 4 段最小代码

p5.js 音乐可视化完整指南：从波形到频谱柱的 4 段最小代码

【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js

给播放器加一个音频可视化组件、给网页背景做会"呼吸"的动效、或者想向别人直观演示音频信号长什么样——这三件事的共同起点，都是用 p5.js 做音乐可视化。它基于 Processing 的创意编程语法，配合音频扩展 p5.sound 封装好 Web Audio API（浏览器内置的声音处理能力），你拿到的不是原始字节流，而是能直接画图的数据数组。

三步装好本地环境

1. 克隆仓库：git clone https://gitcode.com/GitHub_Trending/p5/p5.js，浏览器开发就用 lib/ 目录下的发行文件，不用跑构建。
2. 在 lib/empty-example/ 里照抄 index.html 的引用方式：先引主库，再引音频扩展，最后引你自己的 sketch.js。
3. 用本地服务器打开这个目录，看到黑底画布，环境就通了。

注意顺序不能反：p5.sound.js 的体积是主库的几倍，里面每个分析器都挂在p5对象上，主库没加载它就没有挂载点。

画第一条音频波形

波形展示的是振幅随时间的变化。用 p5.sound.js 的p5.FFT对象分析，默认平滑系数 0.8、1024 个采样点：

let soundFile, fft; function preload() { soundFormats('mp3', 'ogg'); soundFile = loadSound('your-audio-file.mp3'); } function setup() { createCanvas(800, 400); soundFile.loop(); fft = new p5.FFT(0.8, 1024); } function draw() { background(25); stroke(255, 100, 200); let w = fft.waveform(); beginShape(); for (let i = 0; i < w.length; i++) { let x = map(i, 0, w.length, 0, width); let y = map(w[i], -1, 1, 0, height); vertex(x, y); } endShape(); }

• preload()里的loadSound()负责预加载音频，浏览器缓存后才能无缝循环
• fft.waveform()返回 -1 到 1 之间的振幅数组，长度与采样点数一致
• map()把音频数值换算成画布坐标，两个参数区间不能搞混

把频谱分析画成柱状图

波形看"此刻多响"，频谱看"哪些频率在响"。把draw()里画波形那段换成柱状图即可：

let spec = fft.analyze(); let barW = width / spec.length; for (let i = 0; i < spec.length; i++) { let h = map(spec[i], 0, 255, 0, height); fill(100, 255, 200); noStroke(); rect(i * barW, height - h, barW - 1, h); }

fft.analyze()默认返回 0–255 的整型强度数组，下标从低频排到高频；第二个参数可传'db'拿到分贝刻度。bins 数量必须是 2 的幂（16 到 1024），否则 FFT 算法无法工作。

用振幅数据驱动画面

想"随节奏跳动"，用p5.Amplitude分析器：

let amp; function setup() { createCanvas(400, 400); amp = new p5.Amplitude(); amp.normalize(); soundFile.loop(); } function draw() { background(20); let s = map(amp.getLevel(), 0, 1, 40, 300); fill(255, 200, 100, 150); ellipse(width / 2, height / 2, s); }

• amp.getLevel()返回当前音量（RMS 值，均方根，统计意义上的"多响"）
• normalize()让读数稳定落在 0–1，映射尺寸更可控
• amp.smooth(0.5)调节灵敏度，系数越高画面跳动越钝

绕开自动播放与本地运行这两个坑

🛑 自动播放限制是新手撞得最实的一个坑：浏览器要求用户先有点击、触摸这类手势才允许启动 AudioContext，soundFile.loop()写进setup()也会被静默拦截。解法是在mousePressed()或touchStarted()里调 userStartAudio()，或直接把播放器按钮接到手势事件上。

其次，loadSound()本质是异步 fetch，直接用file://双击打开 HTML 会失败，必须走本地服务器（参考仓库 lib/README.txt 里指向的 Local-server 文档）。另外 Safari 与 Chrome 支持的音频格式不同，准备 mp3 加 ogg 两种文件、用soundFormats('mp3', 'ogg')声明，兼容性最稳。

继续探索：官方示例目录与源码位置

仓库里 lib/ 是可直接引用的发行文件，lib/addons/ 是音频扩展，src/ 是核心源码。📁 test/manual-test-examples/addons/p5.sound/ 下有 40 多个官方示例，覆盖波形、频谱、麦克风输入、包络、滤波等场景，每个目录都是可独立打开的 HTML。API 的完整签名和更多代码见官方参考文档（p5js.org/reference）。

把声音变成可绘制的点、柱和圆，只需要"分析器对象 + 两个数组方法 + 一次 map"。下一步：打开FFT_waveform示例，换掉它引用的音频文件，用你自己的曲子跑一遍。

【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js