p5.js 交互应用实战 —— 音乐可视化(案例)

十一迪迪

于 2020-05-21 00:53:03 发布

阅读量6.6k

点赞数 8

文章标签：数据可视化 canvas

本文链接：https://blog.csdn.net/weixin_44812951/article/details/106247957

版权

本文通过四个案例介绍了使用p5.js进行音乐可视化的实践，包括将音乐振幅转化为图形、生成波形图、实现麦克风捕获声音并创建振幅的交互效果，以及综合应用的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例一将振幅转化为图形

准备工作：打开编辑器左边菜单，upload mp3音乐素材（不超过5m）

//定义变量
//Sound--声音, amplitude--振幅
let Sound, amplitude;
//1.预读器（新建函数用来读取上传的音频）
function preload(){
   
  Sound = loadSound('sound.mp3');
}
//2.初始化
function setup(){
   
  createCanvas(400,400);
  amplitude = new p5.Amplitude();
  //将振幅生成线
  noStroke();
}
//3.开始绘制
function draw(){
   
  background(0.5);
  //自由填充颜色
  fill(255,random(255),random(255));
  //映射振幅,并转换成图形
  let level = amplitude.getLevel();
  //振幅是0-1的，画布为400x400，振幅最高不能超过400
  let r = map(level,0,1,0,400);
  ellipse(width/2, height/2, r, r);
}
//4.点击按钮播放/停止
function mousePressed(){
   
  if(Sound.isPlaying()){
   
    Sound.pause();
  }else{
   
    Sound.play();
    background(255,255,0);
  }
}