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浏览器内置的声音处理能力你拿到的不是原始字节流而是能直接画图的数据数组。三步装好本地环境克隆仓库git clone https://gitcode.com/GitHub_Trending/p5/p5.js浏览器开发就用 lib/ 目录下的发行文件不用跑构建。在 lib/empty-example/ 里照抄 index.html 的引用方式先引主库再引音频扩展最后引你自己的 sketch.js。用本地服务器打开这个目录看到黑底画布环境就通了。注意顺序不能反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)调节灵敏度系数越高画面跳动越钝绕开自动播放与本地运行这两个坑 自动播放限制是新手撞得最实的一个坑浏览器要求用户先有点击、触摸这类手势才允许启动 AudioContextsoundFile.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考