10分钟用 p5.js 做音乐可视化从波形到频谱的完整教程【免费下载链接】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 音乐可视化实战教程。跟着做你会学会三件事正确接入 p5.sound 音频扩展用FFT把波形和频谱画出来让画布上的图形跟着音量大小跳动。全程只需要一个 HTML 文件加几段几十行的 JavaScript做完就是一个能直接跑起来的 p5.js 动态图形 Demo。成品长这样一段鼓点循环播放画布上实时滚过波形曲线、跳动的频谱柱还有一个随节拍放大的圆形。上面这张图是 p5.js 生成的循环圆环图形——本文的波形、频谱 Demo 也是同一类每帧重画一遍的 p5.js 动态图形只是驱动数据换成了声音。三个概念先各记一句话写代码之前先把三个分析对象分清楚后面每一步都会用到波形waveform把声音按时间轴摊平看的是这一刻响不响、响多少。类比心电图一条上下起伏的线波动越快越剧烈说明信号越激烈。频谱spectrum把同一时刻的声音拆成多个频率段看的是低音多、高音少。类比调音台的一排推子从左低频到右高频每个位置代表一段频率的能量。FFT快速傅里叶变换就是负责做这次拆分的数学工具p5.js 已把它封装在p5.FFT里。振幅amplitude一个 0 到 1 的数代表整体音量大小不管频率只算总量。类比音量旋钮只关心当前多响。对应到 APIfft.waveform()出波形fft.analyze()出频谱amp.getLevel()出振幅。一个声音对象可以同时接这三种分析器各自独立取数。第一步加载音频库的正确顺序在项目目录里新建index.html引两个脚本script srclib/p5.js/script script srclib/addons/p5.sound.js/script script srcsketch.js/script三个要点顺序不能反。p5.sound 依赖 p5 主库必须先加载lib/p5.js再加载扩展。仓库里现成的示例页 FFT_waveform/index.html 就是这么排的顺序。扩展源码在 lib/addons/p5.sound.js体积较大生产环境建议用压缩版 lib/addons/p5.sound.min.js。本地调试可以直接引用仓库文件如果音频文件放在外部域名还要注意跨域问题见后面的避坑清单。第二步用 FFT 画出第一条波形先只搭最小骨架加载一首曲子循环播放用fft.waveform()取波形数据并连线。let music, fft; function preload() { music loadSound(beat.mp3); } function setup() { createCanvas(800, 300); music.loop(); fft new p5.FFT(0.8, 1024); }new p5.FFT(0.8, 1024)的两个参数0.8是平滑系数0~1越大波形变化越柔和、越滞后1024是采样点数必须是 16~1024 之间的 2 的幂次决定一次取多少个点。再在draw()里把数组画成折线function draw() { background(20); stroke(120, 255, 220); const data fft.waveform(); // 长度 1024取值约 -1 ~ 1 beginShape(); for (let i 0; i data.length; i) { vertex(i * 800 / data.length, 150 - data[i] * 140); } endShape(); }为什么这么写waveform()返回的数组天然横着就是时间轴所以只需把索引i等比例映射到画布宽度振幅值乘以一个缩放系数后从画布中线向上/向下偏移就得到起伏曲线。仓库自带的 FFT_waveform 示例 思路一致可以直接对照。第三步把折线换成频谱柱波形看时间频谱看频率。把draw()换成逐频率画矩形即可function draw() { background(15); const bars fft.analyze(); // 0~255低频在左 const step 800 / bars.length; noStroke(); fill(255, 160, 80); for (let i 0; i bars.length; i) { const h bars[i] * 2.8; rect(i * step, 300, step - 1, -h); } }关键点analyze()返回 0~255 的强度数组下标小的频率低所以低音鼓自然集中在左侧数组默认也有 1024 个点画满 800px 宽每根柱子不到 1px会糊成一片。实际做频谱建议把 FFT 点数调小比如 128或者只取数组前 128 段柱子就清晰了。完整可参考的源码见 FFT_frequency_spectrum 示例。第四步用 Amplitude 让图形跟着音量跳动现在再加一个整体音量响应圆的大小跟着响度走。let amp; // setup() 里补上 amp new p5.Amplitude(0.5); amp.setInput(music); // 不写则监听全部音频draw()里加几行const vol amp.getLevel(); // 0 ~ 1 const r map(vol, 0, 1, 60, 260); noStroke(); fill(255, 220, 120, 140); ellipse(width / 2, height / 2, r);getLevel()每帧返回当前整体音量范围 0~1用map()映射成想要的像素尺寸即可构造参数是平滑系数偏小时响应快、图形抖动大偏大时响应慢、图形更稳。想要贴拍感就取小值如果只关心某一路声音比如同时开了麦克风用setInput()明确绑定来源参考 amplitude_analysis 示例它里面还用了toggleNormalize()把响度归一化方便对不敏感的曲目。坑点提示浏览器只允许用户手势之后启动音频上下文。页面加载完直接loop()大概率静音画布却是动的——看起来像 bug其实是自动播放策略。解决办法是监听一次点击在里面调用userStartAudio()function mousePressed() { userStartAudio(); }该函数定义在 lib/addons/p5.sound.js#L252一行就能解锁声音。避坑清单这三个问题最常被问到两个库加载顺序反了p5.sound 必须在lib/p5.js之后引入否则控制台报p5 is not definedp5.FFT整个不可用。音频加载失败loadSound是异步的放preload()里最省心另外建议同时给 mp3 和 ogg 两种格式music loadSound([beat.mp3, beat.ogg]);浏览器哪个格式解码支持哪个。仓库示例目录 test/manual-test-examples/addons/p5.sound/_files/ 里就有成对的免费音频文件可白嫖。跨域CORS问题把音频放在别的域名上直接loadSound可能拿不到数据解码或静音。稳妥做法是音频和页面同源部署或托管时开启 CORS 响应头。玩法扩展与部署分享基础三段波形、频谱、振幅搭好后往这几个方向加效果都很顺分频段上色用fft.freqRange()把低频、中频、高频分开取数分别控制颜色或不同图元仓库里有现成的 FFT_freqRange 示例3D 频谱在createCanvas(w, h, WEBGL)里用圆柱或立方体阵列代替 2D 矩形高度取analyze()对应频段粒子系统把p5.Vector的速度乘以当前getLevel()鼓点越重粒子跑得越远源码可看 p5.Vector麦克风输入把loadSound换成new p5.Microphone()fft和amp全部复用参考 micFFT 示例。部署方面这个项目是纯静态的index.htmlsketch.js 音频文件夹双击本地打开就能跑丢到任意静态托管Netlify、GitHub Pages也行。想要视频产出直接用录屏工具逐帧捕获画布即可。更多可拆解的完整 Demo 都放在 test/manual-test-examples/addons/p5.sound/共 30 多个场景覆盖振荡器、滤波器、混响等方向。下一步建议把本文四步代码合并进一个文件先跑出波形 频谱柱 音量圆三合一画面然后只改draw()——把矩形换成ellipse、把折线换成径向粒子——用一小时验证你的第一个原创 p5.js 音乐可视化。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
10分钟用 p5.js 做音乐可视化：从波形到频谱的完整教程
10分钟用 p5.js 做音乐可视化从波形到频谱的完整教程【免费下载链接】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 音乐可视化实战教程。跟着做你会学会三件事正确接入 p5.sound 音频扩展用FFT把波形和频谱画出来让画布上的图形跟着音量大小跳动。全程只需要一个 HTML 文件加几段几十行的 JavaScript做完就是一个能直接跑起来的 p5.js 动态图形 Demo。成品长这样一段鼓点循环播放画布上实时滚过波形曲线、跳动的频谱柱还有一个随节拍放大的圆形。上面这张图是 p5.js 生成的循环圆环图形——本文的波形、频谱 Demo 也是同一类每帧重画一遍的 p5.js 动态图形只是驱动数据换成了声音。三个概念先各记一句话写代码之前先把三个分析对象分清楚后面每一步都会用到波形waveform把声音按时间轴摊平看的是这一刻响不响、响多少。类比心电图一条上下起伏的线波动越快越剧烈说明信号越激烈。频谱spectrum把同一时刻的声音拆成多个频率段看的是低音多、高音少。类比调音台的一排推子从左低频到右高频每个位置代表一段频率的能量。FFT快速傅里叶变换就是负责做这次拆分的数学工具p5.js 已把它封装在p5.FFT里。振幅amplitude一个 0 到 1 的数代表整体音量大小不管频率只算总量。类比音量旋钮只关心当前多响。对应到 APIfft.waveform()出波形fft.analyze()出频谱amp.getLevel()出振幅。一个声音对象可以同时接这三种分析器各自独立取数。第一步加载音频库的正确顺序在项目目录里新建index.html引两个脚本script srclib/p5.js/script script srclib/addons/p5.sound.js/script script srcsketch.js/script三个要点顺序不能反。p5.sound 依赖 p5 主库必须先加载lib/p5.js再加载扩展。仓库里现成的示例页 FFT_waveform/index.html 就是这么排的顺序。扩展源码在 lib/addons/p5.sound.js体积较大生产环境建议用压缩版 lib/addons/p5.sound.min.js。本地调试可以直接引用仓库文件如果音频文件放在外部域名还要注意跨域问题见后面的避坑清单。第二步用 FFT 画出第一条波形先只搭最小骨架加载一首曲子循环播放用fft.waveform()取波形数据并连线。let music, fft; function preload() { music loadSound(beat.mp3); } function setup() { createCanvas(800, 300); music.loop(); fft new p5.FFT(0.8, 1024); }new p5.FFT(0.8, 1024)的两个参数0.8是平滑系数0~1越大波形变化越柔和、越滞后1024是采样点数必须是 16~1024 之间的 2 的幂次决定一次取多少个点。再在draw()里把数组画成折线function draw() { background(20); stroke(120, 255, 220); const data fft.waveform(); // 长度 1024取值约 -1 ~ 1 beginShape(); for (let i 0; i data.length; i) { vertex(i * 800 / data.length, 150 - data[i] * 140); } endShape(); }为什么这么写waveform()返回的数组天然横着就是时间轴所以只需把索引i等比例映射到画布宽度振幅值乘以一个缩放系数后从画布中线向上/向下偏移就得到起伏曲线。仓库自带的 FFT_waveform 示例 思路一致可以直接对照。第三步把折线换成频谱柱波形看时间频谱看频率。把draw()换成逐频率画矩形即可function draw() { background(15); const bars fft.analyze(); // 0~255低频在左 const step 800 / bars.length; noStroke(); fill(255, 160, 80); for (let i 0; i bars.length; i) { const h bars[i] * 2.8; rect(i * step, 300, step - 1, -h); } }关键点analyze()返回 0~255 的强度数组下标小的频率低所以低音鼓自然集中在左侧数组默认也有 1024 个点画满 800px 宽每根柱子不到 1px会糊成一片。实际做频谱建议把 FFT 点数调小比如 128或者只取数组前 128 段柱子就清晰了。完整可参考的源码见 FFT_frequency_spectrum 示例。第四步用 Amplitude 让图形跟着音量跳动现在再加一个整体音量响应圆的大小跟着响度走。let amp; // setup() 里补上 amp new p5.Amplitude(0.5); amp.setInput(music); // 不写则监听全部音频draw()里加几行const vol amp.getLevel(); // 0 ~ 1 const r map(vol, 0, 1, 60, 260); noStroke(); fill(255, 220, 120, 140); ellipse(width / 2, height / 2, r);getLevel()每帧返回当前整体音量范围 0~1用map()映射成想要的像素尺寸即可构造参数是平滑系数偏小时响应快、图形抖动大偏大时响应慢、图形更稳。想要贴拍感就取小值如果只关心某一路声音比如同时开了麦克风用setInput()明确绑定来源参考 amplitude_analysis 示例它里面还用了toggleNormalize()把响度归一化方便对不敏感的曲目。坑点提示浏览器只允许用户手势之后启动音频上下文。页面加载完直接loop()大概率静音画布却是动的——看起来像 bug其实是自动播放策略。解决办法是监听一次点击在里面调用userStartAudio()function mousePressed() { userStartAudio(); }该函数定义在 lib/addons/p5.sound.js#L252一行就能解锁声音。避坑清单这三个问题最常被问到两个库加载顺序反了p5.sound 必须在lib/p5.js之后引入否则控制台报p5 is not definedp5.FFT整个不可用。音频加载失败loadSound是异步的放preload()里最省心另外建议同时给 mp3 和 ogg 两种格式music loadSound([beat.mp3, beat.ogg]);浏览器哪个格式解码支持哪个。仓库示例目录 test/manual-test-examples/addons/p5.sound/_files/ 里就有成对的免费音频文件可白嫖。跨域CORS问题把音频放在别的域名上直接loadSound可能拿不到数据解码或静音。稳妥做法是音频和页面同源部署或托管时开启 CORS 响应头。玩法扩展与部署分享基础三段波形、频谱、振幅搭好后往这几个方向加效果都很顺分频段上色用fft.freqRange()把低频、中频、高频分开取数分别控制颜色或不同图元仓库里有现成的 FFT_freqRange 示例3D 频谱在createCanvas(w, h, WEBGL)里用圆柱或立方体阵列代替 2D 矩形高度取analyze()对应频段粒子系统把p5.Vector的速度乘以当前getLevel()鼓点越重粒子跑得越远源码可看 p5.Vector麦克风输入把loadSound换成new p5.Microphone()fft和amp全部复用参考 micFFT 示例。部署方面这个项目是纯静态的index.htmlsketch.js 音频文件夹双击本地打开就能跑丢到任意静态托管Netlify、GitHub Pages也行。想要视频产出直接用录屏工具逐帧捕获画布即可。更多可拆解的完整 Demo 都放在 test/manual-test-examples/addons/p5.sound/共 30 多个场景覆盖振荡器、滤波器、混响等方向。下一步建议把本文四步代码合并进一个文件先跑出波形 频谱柱 音量圆三合一画面然后只改draw()——把矩形换成ellipse、把折线换成径向粒子——用一小时验证你的第一个原创 p5.js 音乐可视化。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考