p5js-声音可视化

演示视频：https://www.bilibili.com/video/av23136993

代码：

var song, fft;

var tx =[];

var ty = [];

var big = [];

var bb = [];

var speed= [];

var rr= [];

var gg= [];

var bb= [];

var a = 0;

var r = 0;

var now = 0;

function preload() {

// we have included both an .ogg file and an .mp3 file

soundFormats('ogg', 'mp3');

song = loadSound('data/4.mp3');

}

function setup() {

createCanvas(1500, 900);

song.play();

fft = new p5.FFT();

fft.setInput(song);

for (var i = 0; i

bb[i] = random(300);//x坐标

speed[i] = random(3,8);

rr[i] = random(255);

gg[i] = random(255);

bb[i] = random(255);

}

noStroke();

}

function mousePressed() {

if ( song.isPlaying() ) { // .isPlaying() returns a boolean

song.pause();

} else {

song.play(); // playback will resume from the pause position

}

now = 1- now ;

}

function draw() {

background(255);

var spectrum = fft.analyze();

for (var i = 0; i

{

push;

translate(700, 450);

rotate(2*PI/200);

translate(-700, -450);

rect(700, 300, 6, -spectrum[i]);

pop;

}

for (var i = 0; i

bb[i]+=speed[i];

if(bb[i]> 300)

bb[i] = 0;

tx[i] = 700+cos(r)*bb[i];//x坐标

ty[i] = 450+sin(r)*bb[i];//y坐标

r+=2*PI/200;//增加

}

var w = -0.5*PI/200;//角度

for (var i = 0; i

big[i] = spectrum[i];

fill(rr[i],gg[i],bb[i],10+mouseX);

if(now == 0)

ellipse(tx[i],ty[i],20+big[i]/8,20+big[i]/8);

else

rect(tx[i],ty[i],20+big[i]/8,20+big[i]/8);

}

w+=2*PI/200;//增加

}

工程文件：链接：https://pan.baidu.com/s/1pQdtF_unjwf8UmtKjyl8Nw 密码：ut66