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 交互应用实战 —— 音乐可视化(案例)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/73135.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

linux 进程和计划管理

linux 进程和计划管理

查看进程 在Linux系统中&#xff0c;有多个命令可以用来查看进程 以下是一些常用的命令&#xff1a; ps命令&#xff1a;用于查看当前系统中的进程状态。 基本用法&#xff1a;ps -ef&#xff0c;该命令会以完整格式显示所有进程的详细信息&#xff0c;包括用户ID、进程ID、父…
阅读更多...
DeepSeek 多模态大模型 Janus-Pro 本地部署教程

DeepSeek 多模态大模型 Janus-Pro 本地部署教程

下载模型仓库 git clone https://github.com/deepseek-ai/Janus.git 国内下载仓库失败时&#xff0c;可以使用以下代理&#xff1a; git clone https://github.moeyy.xyz/https://github.com/deepseek-ai/Janus.git 准备 Conda 3.12 虚拟环境 conda create --name deepseek7B p…
阅读更多...
Qt开源控件库（qt-material-widgets）的编译及使用

Qt开源控件库（qt-material-widgets）的编译及使用

项目简介 qt-material-widgets是一个基于 Qt 小部件的 Material Design 规范实现。 项目地址 项目地址&#xff1a;qt-material-widgets 本地构建环境 Win11 家庭中文版 VS2019 Qt5.15.2 (MSVC2019) 本地构建流程 克隆后的目录结构如图&#xff1a; 直接使用Qt Crea…
阅读更多...
ARM 嵌入式处理器内核与架构深度剖析(2)： ARM 处理器架构剖析

ARM 嵌入式处理器内核与架构深度剖析(2)： ARM 处理器架构剖析

目录 一、ARM处理器架构剖析 1.1. 指令集架构&#xff08;ISA&#xff09; 1.2. 寄存器集 1.3. 存储模型 1.4. 异常模型 二、架构设计精要 2.1 处理器模式与特权分级 2.2 寄存器银行化技术 2.3 指令集演化 三、微架构核心技术 3.1 流水线创新 3.2 内存子系统 3.3 …
阅读更多...
Flutter 按钮组件 TextButton 详解

Flutter 按钮组件 TextButton 详解

目录 1. 引言 2. TextButton 的基本用法 3. 主要属性 4. 自定义按钮样式 4.1 修改文本颜色 4.2 添加背景色 4.3 修改按钮形状和边距 4.4 样式定制 5. 高级应用技巧 5.1 图标文本组合 5.2 主题统一配置 5.3 动态交互 6. 性能优化与注意事项 6.1 点击区域优化 6.…
阅读更多...
std::ranges::views::split, lazy_split, std::ranges::split_view, lazy_split_view

std::ranges::views::split, lazy_split, std::ranges::split_view, lazy_split_view

std::ranges::views::split, std::ranges::split_view C20 中引入的用于分割范围&#xff08;range&#xff09;的组件&#xff0c;允许将输入范围按特定分隔符或条件分割成多个子范围。以下是详细说明和示例&#xff1a; 基本概念 1. 功能 分割范围&#xff1a;将输入范围&…
阅读更多...
c++ constraints与concepts使用笔记

c++ constraints与concepts使用笔记

c constraints与concepts使用笔记 1. 模板参数缺乏约束的问题2. Concepts 基本概念3. Concept 的定义与使用4. requires 表达式详解5. requires 从句 vs requires 表达式完整示例&#xff1a;约束矩阵运算 1. 模板参数缺乏约束的问题 问题分析&#xff1a; 传统模板参数没有语…
阅读更多...
Qt | 屏幕截图实现

Qt | 屏幕截图实现

01 全局截屏控件 1. 鼠标右键弹出菜单。 2. 支持全局截屏。 3. 支持局部截屏。 4. 支持截图区域拖动。 5. 支持图片另存为。 演示 点击按钮即可截图 源码： 通过网盘分享的文件：screenwidget屏幕截图 链接: https://pan.baidu.com/s/1PZfQlUXNIoZKEfEtLNV2jQ?pwd=5jsg 提…
阅读更多...
2.angular指令

2.angular指令

初级使用可以查看视频 参考手册 注意 像ng-class,ng-value,ng-href等这些&#xff0c;很多都可以直接用class“{{}}” 原生写&#xff0c;为啥还出这些指令&#xff0c;是因为原生的比如刚一进页面就先出现表达式了&#xff0c;浏览器走到这里的时候才去解析&#xff0c;给用户…
阅读更多...
CTFshow 【WEB入门】信息搜集 【VIP限免】 web1-web17

CTFshow 【WEB入门】信息搜集 【VIP限免】 web1-web17

CTFshow 【 WEB入门】、【VIP限免】 web1 ----源码泄露 首先第一步&#xff0c;看源代码 web2----前台JS绕过 简单点击查看不了源代码&#xff0c;可以强制查看 比如 Ctrl Shift ICtrl U或者在url前加一个view-source: view-source:http://79999ca1-7403-46da-b25b-7ba9…
阅读更多...
java 手搓一个http工具类请求传body

java 手搓一个http工具类请求传body

import java.io.*; import java.net.HttpURLConnection; import java.net.URL; import java.nio.charset.StandardCharsets;public class HttpUtil {/*** JSON请求发起*/public static String httpJsonRequest(String requestUrl, String requestJson) {String responseJson &…
阅读更多...
Spring boot3-WebClient远程调用非阻塞、响应式HTTP客户端

Spring boot3-WebClient远程调用非阻塞、响应式HTTP客户端

来吧&#xff0c;会用就行具体理论不讨论 1、首先pom.xml引入webflux依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId> </dependency> 别问为什么因为是响应式....…
阅读更多...
写了一个二叉树构造函数和画图函数，方便debug

写了一个二叉树构造函数和画图函数，方便debug

代码 class TreeNode(object):def __init__(self, val, leftNone, rightNone):self.val valself.left leftself.right rightdef construct_tree(nodes):if not nodes:return Noneroot TreeNode(nodes[0])queue [root]index 1while index < len(nodes):node queue.p…
阅读更多...
QT：串口上位机

QT：串口上位机

创建工程 布局UI界面 设置名称 设置数据 设置波特率 波特率默认9600 设置数据位 数据位默认8 设置停止位 设置校验位 调整串口设置、接收设置、发送设置为Group Box 修改配置 QT core gui serialport 代码详解 mianwindow.h 首先在mianwindow.h当中定义一个串口指…
阅读更多...
【Pandas】pandas Series asof

【Pandas】pandas Series asof

Pandas2.2 Series Time Series-related 方法描述Series.asfreq(freq[, method, how, …])用于将时间序列数据转换为指定的频率Series.asof(where[, subset])用于返回时间序列中指定索引位置的最近一个非缺失值 pandas.Series.asof pandas.Series.asof 方法用于返回时间序列…
阅读更多...
沉浸式CSS学习路径

沉浸式CSS学习路径

好的！我将以魔法学院成长故事为框架，为您设计一套沉浸式CSS学习路径。以下是叙事化学习提纲： 第一卷：像素学徒的觉醒 章节1：被封印的魔法书 发现HTML的"素颜"本质，通过<!DOCTYPE html>解除网页封印用style标签打开CSS魔法书，学会给文字穿上color斗篷和…
阅读更多...
使用netlify部署github的vue/react项目或本地的dist，国内也可以正常访问

使用netlify部署github的vue/react项目或本地的dist，国内也可以正常访问

提供简洁的部署流程和丰富功能&#xff0c;如自定义域名、自动构建和服务器端功能。通过连接到 Git 仓库实现持续部署&#xff0c;每次推送代码都会自动构建和发布&#xff0c;支持无服务器函数&#xff0c;允许在前端项目中实现后端逻辑&#xff0c;提供直观的用户界面来管理和…
阅读更多...
复现 MoGe

复现 MoGe

要复现 MoGe&#xff0c;以下给出一般性的复现训练过程步骤示例&#xff09;的训练过程&#xff0c;你可以参考以下步骤&#xff1a; 环境准备 安装必要的深度学习框架&#xff0c;如 TensorFlow 或 PyTorch&#xff0c;以及相关的库&#xff0c;例如用于数据处理的 NumPy、Pan…
阅读更多...
Redis-缓存穿透击穿雪崩

Redis-缓存穿透击穿雪崩

1. 穿透问题 缓存穿透问题就是查询不存在的数据。在缓存穿透中&#xff0c;先查缓存&#xff0c;缓存没有数据&#xff0c;就会请求到数据库上&#xff0c;导致数据库压力剧增。 解决方法&#xff1a; 给不存在的key加上空值&#xff0c;防止每次都会请求到数据库。布隆过滤器…
阅读更多...
如何在自己的网站接入API接口获取数据？分步指南与实战示例

如何在自己的网站接入API接口获取数据？分步指南与实战示例

将第三方API接入自己的网站是获取实时数据、扩展功能的重要手段&#xff08;如展示商品、同步订单、用户登录等&#xff09;。以下是完整的接入流程与关键实践&#xff0c;以微店API为例&#xff0c;适用于多数开放平台。 一、准备工作&#xff1a;注册与权限申请 注册开发者…
阅读更多...
最新文章

Copyright @ 2022~2023