Converts audio peaks to bars and renders them on p5js canvas

render-audiobars-p5.js

let peaks = [];
let rectRadius = 4;
let barsW = 3;

let soundFile = loadSound('path/to/audio.mp3'); // loadSound() is a p5sound method
// loadSound inside the preload() function

// We calculate audio peaks to show bars and wave
// Do this inside setup() function 
peaks = soundFile.getPeaks(width/(barsW*2)); 
// width ‹=› Canvas width
// getPeaks() is a p5sound method

function getAudioBars(){
  
  let barWidth = barsW;
  let offsetWidth = ((barsW)*2)-1;
  let offset = 0;
  let peakValue = 0;
  
  for(var i = 0; i < peaks.length; i++){
    if(peaks[i] < 0){
      peakValue = -peaks[i];
    } else {
      peakValue = peaks[i];
    }
    
    let barHeight = map(peakValue, 0, 2, 0.1, height-10);
    
    push();
      noStroke();
      let c = color(0, 0, 0);
      fill(c);
      rect(i + offset, (height/2) - (barHeight), barWidth, barHeight*2, rectRadius);
    pop();
    
    offset += offsetWidth;
  }
}

// then call getAudioBars() inside p5 draw() function
function draw(){
  if(soundFile != null){
    getAudioBars();
  }  
}