p5.js：sound（音乐）可视化，动画显示音频高低变化
本文通过4个案例介绍了使用 p5.js 进行音乐可视化的实践，包括将音频振幅转化为图形、生成波形图。
承上一篇：vite：初学 p5.js demo 画圆圈
cd p5-demo
copy .\node_modules\p5\lib\p5.min.js .
copy .\node_modules\p5\lib\addons\p5.sound.min.js .
在 p5.js 里，FFT() 是 p5.FFT 类的构造函数，p5.FFT 是 p5.sound 库中的一个重要类，它代表快速傅里叶变换（Fast Fourier Transform，FFT）。FFT 是一种在信号处理领域广泛使用的算法，主要用于将时域信号转换为频域信号，通过它能够分析信号在不同频率上的能量分布情况。
作用
在音频可视化的场景中，p5.FFT 可把音频信号从时域转换为频域，让你能获取音频在不同频率下的振幅信息，进而根据这些信息实现音频可视化效果，比如绘制频谱图、波形图等。
用法
在使用 p5.FFT 时，一般先创建一个 p5.FFT 对象，然后在 draw() 函数中调用其 analyze() 方法来获取音频频谱数据。
编写 p5_audio_vis.html 如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>p5.js Audio Visualization</title><script src="p5.min.js"></script><script src="p5.sound.min.js"></script>
</head>
<body><script>let song; // 音乐let fft; // 快速傅里叶变换//1.预读器（新建函数用来读取音频文件）function preload() {// 请替换为你自己的音频文件路径song = loadSound('your_audio_file.mp3');}//2.初始化function setup() {createCanvas(400, 400);fft = new p5.FFT();// 图形一般由填充色和边框两部分组成;noStroke()函数可以关闭边框的绘制noStroke();}//3.开始绘制function draw() {background(0); // spectrum 波谱、频谱let spectrum = fft.analyze();noStroke();fill(255, 0, 255);for (let i = 0; i < spectrum.length; i++) {let x = map(i, 0, spectrum.length, 0, width);let h = -height + map(spectrum[i], 0, 255, height, 0);rect(x, height, width / spectrum.length, h);}}//4.点击按钮播放/停止function mousePressed(){if (song.isPlaying()){song.pause();} else {song.play();}}</script>
</body>
</html>
运行 npm run dev
访问 http://localhost:5173/p5_audio_vis.html , 鼠标点击一下就播放音乐。
在 p5.js 中，下面这两行代码的含义如下：
fft = new p5.FFT();
这行代码创建了一个 p5.FFT 对象。p5.FFT 是 p5.sound 库中的一个类，它代表快速傅里叶变换（Fast Fourier Transform，FFT）。快速傅里叶变换是一种高效的算法，能够将时域信号转换为频域信号。在音频处理和可视化的场景中，使用 p5.FFT 对象可以分析音频信号在不同频率上的能量分布情况。这里没有给 p5.FFT 的构造函数传入参数，所以它会使用默认的参数设置，默认平滑度（smoothing）为 0.8，默认频率区间数量（bins）为 1024。
waveform = fft.waveform();
这行代码调用了 p5.FFT 对象的 waveform() 方法，并将返回值赋给变量 waveform。waveform() 方法的作用是获取当前音频信号的波形数据。波形数据是音频信号在时域上的表示，它记录了音频信号在不同时间点的振幅值。waveform() 方法返回一个数组，数组中的每个元素代表了音频信号在某个时间点的振幅，取值范围通常在 -1 到 1 之间。
编写 p5_waveform.html 如下
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>p5 audio necklace demo</title><script src="p5.min.js"></script><script src="p5.sound.min.js"></script>
</head>
<body>
<script>
let song;
let fft; // 快速傅里叶变换
let waveform; // 波形数据function preload() {// 请替换为你自己的音频文件路径song = loadSound('your.mp3');
}function setup() {createCanvas(400, 400);fft = new p5.FFT();
}function draw() {background(0);waveform = fft.waveform();stroke(255);strokeWeight(2);noFill();beginShape();for (let i = 0; i < waveform.length; i++) {let x = map(i, 0, waveform.length, 0, width);let y = map(waveform[i], -1, 1, 0, height);vertex(x, y);}endShape();
}function mousePressed(){if (song.isPlaying()){song.pause();} else {song.play();}
}
</script>
</body>
</html>
运行 npm run dev
访问 http://localhost:5173/p5_waveform.html , 鼠标点击一下就播放音乐。
编写 p5_audio_necklace.html 如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>p5 audio necklace demo</title><script src="p5.min.js"></script><script src="p5.sound.min.js"></script>
</head>
<body>
<script>
const soundPaths = ["your.mp3"];
let fft; // 快速傅里叶变换
let waveform; // 波形
let stars = [];
function preload()
{sound = loadSound(soundPaths);
}function setup()
{createCanvas(640,480,WEBGL); // 创建三维画板colorMode(HSB); // 颜色体系切换fft = new p5.FFT();waveform = fft.waveform();sound.amp(0.8); // 控制音量
}function draw()
{background(255);orbitControl();waveform = fft.waveform(); // 计算每一次刷新的音乐段振幅rotateX(PI/3);let r = width * 0.3;for(let a = 0;a < 2 * PI;a += PI/25){let index = int(map(a, 0, 2*PI, 0, 1024));let curH = abs(300 * waveform[index])// 需要注意图像绘制原点在电脑屏幕正中央let x = r * cos(a);let y = r * sin(a);push();translate(x,y,curH/2);rotateX(PI/2);let c1 = color(150,200,200);let c2 = color(200,100,160);let rate = map(a, 0, 2*PI, 0, 0.9);let col = lerpColor(c1,c2,rate);stroke(col);cylinder(10, 5 + curH); // 基于圆柱基础高度5pop();for(let k = 0; k < 10; k++){// 振幅越小，创建粒子的概率就会越小// 粒子运动的速度和圆柱的高度大小正相关，即振幅越大，粒子运动速度越快if(random(0.01,1) < waveform[index]) {// console.log(waveform[index]);stars.push(new star(x, y, 5 + curH, col));}}}for(let i = 0; i < stars.length; i++){stars[i].move();stars[i].show();// console.log(stars[i].z);if (stars[i].z > 500){stars.splice(i,1); // 让粒子到一定时间慢慢被删除}}
}function star(x, y, z, col)
{this.x = x + random(-2,2);this.y = y + random(-2,2);this.z = z;this.col = col;this.life = 500;this.speedX = random(-0.3,0.3);this.speedY = random(-0.3,0.3);this.speedZ = 0.05 + (z - 5) / 15;this.move = function(){this.z += this.speedZ;this.x += this.speedX;this.y += this.speedY;this.life -= 1;};this.show = function(){push();let a = map(this.life, 0, 500, 0, 1);stroke(hue(this.col), saturation(this.col),brightness(this.col));strokeWeight(1);point(this.x, this.y, this.z);pop()};}function mousePressed(){if (sound.isPlaying()){sound.pause();} else {sound.play();}
}
</script>
</body>
</html>
运行 npm run dev
访问 http://localhost:5173/p5_audio_necklace.html , 鼠标点击一下就播放音乐。
参考：基于p5.js和ml5.js库的“音乐可视化+手势交互控制”创意网页制作
编写 p5_sound_vis.html 如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>p5.js Sound Visualization</title><script src="p5.min.js"></script><script src="p5.sound.min.js"></script>
</head>
<body>
<script>//定义变量let song; // 声音let amplitude; // 振幅//1.预读器（新建函数用来读取音频文件）function preload(){// 请替换为你自己的音频文件路径song = loadSound('your.ogg');}//2.初始化function setup(){ createCanvas(400,400);amplitude = new p5.Amplitude();//noStroke()函数可以关闭边框的绘制noStroke();}//3.开始绘制function draw(){ background(0.5);//自由填充颜色fill(255,random(255),random(255));//映射振幅,并转换成图形let level = amplitude.getLevel();//振幅是0-1的，画布为400x400，振幅最高不能超过400let r = map(level,0,1, 0,400);ellipse(width/2, height/2, r, r);}//4.点击按钮播放/停止function mousePressed(){ if(song.isPlaying()){ song.pause();} else { song.play();}}
</script>
</body>
</html>
运行 npm run dev
访问 http://localhost:5173/p5_sound_vis.html , 鼠标点击一下就播放音乐。
参阅：p5.js 交互应用实战 —— 音乐可视化(案例)
相关文章：
p5.js：sound（音乐）可视化，动画显示音频高低变化
本文通过4个案例介绍了使用 p5.js 进行音乐可视化的实践，包括将音频振幅转化为图形、生成波形图。 承上一篇：vite：初学 p5.js demo 画圆圈 cd p5-demo copy .\node_modules\p5\lib\p5.min.js . copy .\node_modules\p5\lib\addons\p5.soun…...
Linux下安装elasticsearch（Elasticsearch 7.17.23）
Elasticsearch 是一个分布式的搜索和分析引擎，能够以近乎实时的速度存储、搜索和分析大量数据。它被广泛应用于日志分析、全文搜索、应用程序监控等场景。 本文将带你一步步在 Linux 系统上安装 Elasticsearch 7.17.23 版本，并完成基本的配置࿰…...
plt和cv2有不同的图像表示方式和颜色通道顺序
在处理图像时，matplotlib.pyplot (简称 plt) 和 OpenCV (简称 cv2) 有不同的图像表示方式和颜色通道顺序。了解这些区别对于正确处理和显示图像非常重要。 1. 图像形状和颜色通道顺序 matplotlib.pyplot (plt) 形状：plt 通常使用 (height, width, cha…...
【The Rap of China】2018
中国新说唱第一季，2018 2018年4月13日，该节目通过官方微博宣布，其第二季将更名为《中国新说唱》。 《中国新说唱2018》由张震岳、MC Hotdog、潘玮柏、邓紫棋、WYF 担任明星制作人； 艾热获得冠军、那吾克热玉素甫江获得亚军、ICE…...
通义万相2.1开源版本地化部署攻略，生成视频再填利器
2025 年 2 月 25 日晚上 11：00 通义万相 2.1 开源发布，前两周太忙没空搞它，这个周末，也来本地化部署一个，体验生成效果如何，总的来说，它在国内文生视频、图生视频的行列处于领先位置，…...
)
YOLOv10改进之MHAF(多分支辅助特征金字塔)
YOLOv10架构 YOLOv10的架构主要由 主干网络、特征金字塔和预测头 三部分组成。主干网络采用改进的Darknet结构，增强特征提取能力。特征金字塔模块使用多尺度特征融合技术，提高对不同大小目标的检测效果。预测头则负责生成最终的检测结果。这种结构设计使得YOLOv10在保持高效…...
好玩的谷歌浏览器插件-自定义谷歌浏览器光标皮肤插件-Chrome 的自定义光标
周末没有啥事 看到了一个非常有意思的插件 就是 在使用谷歌浏览器的时候，可以把鼠标的默认样式换一个皮肤。就像下面的这种样子。 实际谷歌浏览器插件开发对于有前端编程基础的小伙伴 还是比较容易的，实际也是写 html css js 。 所以这个插件使用的技术…...
svn删除所有隐藏.svn文件，文件夹脱离svn控制
新建一个文件，取名remove-svn-folders.reg，输入如下内容： Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] "Delete SVN Folders" [HKEY_LOCAL_MACHINE\SOFTWARE\Class…...
六十天前端强化训练之第十二天之闭包深度解析
欢迎来到编程星辰海的博客讲解 目录 第一章：闭包的底层运行机制 1.1 词法环境（Lexical Environment）的构成JavaScript 引擎通过三个关键组件管理作用域： 1.2 作用域链的创建过程当函数被定义时： 1.3 闭包变量的生命…...
DeepSeek R1-32B医疗大模型的完整微调实战分析（全码版）
DeepSeek R1-32B微调实战指南 ├── 1. 环境准备 │ ├── 1.1 硬件配置 │ │ ├─ 全参数微调：4*A100 80GB │ │ └─ LoRA微调：单卡24GB │ ├── 1.2 软件依赖 │ │ ├─ PyTorch 2.1.2+CUDA │ │ └─ Unsloth/ColossalAI │ └── 1.3 模…...
10.2 继承与多态
文章目录 继承多态 继承 继承的作用是代码复用。派生类自动获得基类的除私有成员外的一切。基类描述一般特性，派生类提供更丰富的属性和行为。在构造派生类时，其基类构造函数先被调用，然后是派生类构造函数。在析构时顺序刚好相反。 // 基类…...
[网络爬虫] 动态网页抓取 — Selenium 元素定位
🌟想系统化学习爬虫技术？看看这个：[数据抓取] Python 网络爬虫 - 学习手册-CSDN博客 在使用 Selenium 时，往往需要先定位到指定元素，然后再执行相应的操作。例如，再向文本输入框中输入文字之前，…...
静态网页的爬虫（以电影天堂为例）
一、电影天堂的网址（url） 电影天堂_免费电影_迅雷电影下载_电影天堂网最好的迅雷电影下载网，分享最新电影，高清电影、综艺、动漫、电视剧等下载！https://dydytt.net/index.htm 我们要爬取这个页面上的内容 二、代码…...
将图片存储至阿里云 OSS
将图片存储至阿里云 OSS 一、概述 在项目开发中，我们常常需要处理用户上传的图片。本文将介绍如何使用前端的 el-upload 组件将照片上传到后端，后端再将照片存储到阿里云 OSS，并最终返回图片的 URL 给前端。 二、前端实现 1. 安装依赖 确…...
Android设备是如何进入休眠的呢？
首先我们手机灭屏后，一般需要等一段时间CPU才真正进入休眠。即Android设备屏幕暗下来的时候，并不是立即就进入了休眠模式；当所有唤醒源都处于de-avtive状态后，系统才会进入休眠。在手机功耗中从灭屏开始到CPU进入休眠时间越短&…...
ctfshow做题笔记—栈溢出—pwn65~pwn68
目录 前言 一、pwn65(你是一个好人) 二、pwn66(简单的shellcode？不对劲，十分得有十二分的不对劲) 三、pwn67(32bit nop sled)（确实不会） 四、pwn68(64bit nop sled) 前言 做起来比较吃力哈哈，自己还是太菜了&…...
高效处理 List＜T＞ 集合：更新、查找与优化技巧
引言 在日常开发中，List<T> 是我们最常用的数据结构之一。无论是批量更新数据、查找特定项还是进行复杂的集合操作，掌握 List<T> 的高级用法可以显著提高代码的效率和可读性。本文将详细介绍如何使用 List<T> 进行批量更新、查找匹配项以及优化性能的方法…...
Java基础系列：深入解析final与static关键字的奥秘与避坑指南
目录 一、final关键字的四重境界 1. 修饰常量（成员变量/局部变量） 2. 修饰方法（禁止重写） 3. 修饰类（禁止继承） 4. 并发控制（内存屏障） 二、static关键字的四维空间 1. 静态变…...
django各种mixin用法
在 Django 中，Mixin 是一种用于扩展类功能的设计模式。通过 Mixin，可以在不修改原有类的情况下，为其添加新的方法或属性。Django 中的 Mixin 广泛应用于视图（View）、表单（Form）、模型（Model）等组件中。以下是 Django 中常见 Mixin 的用法和示例： 一、视图（View）中的…...
JS中的闭包（closures）一种强大但易混淆的概念
JavaScript 中的闭包（closures）被认为是一种既强大又易混淆的概念。闭包允许函数访问其外部作用域的变量，即使外部函数已执行完毕，这在状态维护和回调函数中非常有用。但其复杂性可能导致开发者的误解，尤其在变量捕获和…...
Element使用
Element(美化网页） ElementUI的使用注意事项： Element.ui的使用基于Vue环境，于是Element相关组件的使用必须放在Vue对象绑定的视图中去 ElementUI的JS库的引入必须放在vue.js库的后面 <!-- 引入样式 --><link rel"styleshee…...
基于YOLO11深度学习的电瓶车进电梯检测与语音提示系统【python源码+Pyqt5界面+数据集+训练代码】
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
R语言的基础命令及实例操作
> T & F [1] FALSE > T & T [1] TRUE > T | F [1] TRUE > F | F [1] FALSE > a <- c(T,F,T) > b <- c(F,F,T) > a & b [1] FALSE FALSE TRUE > a | b [1] TRUE FALSE TRUE 在 R 中，大小写是敏感的，也就是说…...
AI视频生成工具清单（附网址与免费说明）
以下是一份详细的AI视频制作网站总结清单，包含免费/付费信息及核心功能说明： AI视频生成工具清单（附网址与免费说明） 1. Synthesia 网址：https://www.synthesia.io是否免费：免费试用（生成视频…...
知识蒸馏综述Knowledge Distillation: A Survey解读
论文链接：Knowledge Distillation: A Survey 摘要：近年来，深度神经网络在工业界和学术界都取得了成功，尤其是在计算机视觉任务方面。深度学习的巨大成功主要归功于它能够扩展以对大规模数据进行编码，并且能够处理数十…...
第十五届蓝桥杯省赛电子类单片机学习过程记录（客观题）
客观试题： 01．典型的BUCK电源电路包含哪些关键器件（ABCD） A. 电容 B. 二极管 C. 电感 D. MOSFET 解析： 典型的 BUCK 电源电路是一种降压型的直流-直流转换电路，它包含以下关键器件： A.电容：电容在电路中起到滤波的作用。输入电容用于平滑输入电压的波动，减少电源噪声对…...
【C++】：STL详解 —— 红黑树封装map和set
目录 红黑树的源代码 正向迭代器的代码 反向迭代器的代码 set的模拟实现 map的模拟实现 红黑树的源代码 #pragma once #include <iostream>using namespace std; // set ->key // map ->key/value// set ->key // map ->key/valueenum Colour {RED,BLAC…...
【QWEN】机器人控制器的控制周期越短精度越高吗
好的，用户问的是“机器人控制器的控制周期越短精度越高吗”。我需要根据提供的知识库内容来回答这个问题。首先，我得回忆一下知识库里的相关信息。 知识库里有几篇相关的文章。比如，[3]提到控制周期越短，控制性能的上限越高&…...
使用数据库和缓存的时候，是如何解决数据不一致的问题的？
1.缓存更新策略 1.1. 缓存旁路模式（Cache Aside） 在应用里负责管理缓存，读取时先查缓存，如果命中了则返回缓存，如果未命中就查询数据库，然后返回缓存，返回缓存的同时把数据给写入缓存中。更新…...
【c++】平移字符串
说明 实现字符串的左移与右移 示例代码 #include <iostream> #include <string> using namespace std;int main() {string str1 "12345";//左移2位string str2 str1.substr(2) str1.substr(0, 2);cout << str2 << endl;//右移2位&…...