47 lines
1.0 KiB
JavaScript
47 lines
1.0 KiB
JavaScript
|
let audio = document.getElementById('audio');
|
||
|
|
let file_path = audio.src;
|
||
|
|
|
||
|
|
function preload(){
|
||
|
|
sound = loadSound(audio.src);
|
||
|
|
}
|
||
|
|
|
||
|
|
function setup(){
|
||
|
|
let cnv = createCanvas(100,100);
|
||
|
|
cnv.mouseClicked(togglePlay);
|
||
|
|
fft = new p5.FFT();
|
||
|
|
sound.amp(0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw(){
|
||
|
|
background(220);
|
||
|
|
|
||
|
|
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 )
|
||
|
|
}
|
||
|
|
|
||
|
|
let waveform = fft.waveform();
|
||
|
|
noFill();
|
||
|
|
beginShape();
|
||
|
|
stroke(20);
|
||
|
|
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();
|
||
|
|
|
||
|
|
text('tap to play', 20, 20);
|
||
|
|
}
|
||
|
|
|
||
|
|
function togglePlay() {
|
||
|
|
if (sound.isPlaying()) {
|
||
|
|
sound.pause();
|
||
|
|
} else {
|
||
|
|
sound.loop();
|
||
|
|
}
|
||
|
|
}
|