Music Visualiser Template

index.html

<audio controls id="audioPlayer"></audio>

music-visualiser-template.markdown

Music Visualiser Template

Code your own music visualiser using this simple template.

A Pen by James Hancock on CodePen.

License.

script.js

//// ---- DAT.GUI CODE ---- ////
// - Documentation - https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

let visualSettings = { 
  xOffset: 0.2,
  yOffset: 0.2,
  width: 0.6,
  height: 0.6,
  center: function(){
    this.xOffset = (1 - this.width)/2;
    this.yOffset = (1 - this.height)/2;
  },
  fillColour: { h: 120, s: 0.9, v: 0.7 },
  strokeColour: { h: 120, s: 1.0, v: 1.0 },
  hasBorder: true,
}

let gui = new dat.GUI(); 

let sizeFolder = gui.addFolder("Size & Position");
sizeFolder.add(visualSettings, "width", 0, 1).name("Width"); 
sizeFolder.add(visualSettings, "height", 0, 1).name("Height");
sizeFolder.add(visualSettings, "center").name("Center it.");
sizeFolder.add(visualSettings, "xOffset", 0, 1).name("X Position");
sizeFolder.add(visualSettings, "yOffset", 0, 1).name("Y Position");

let colourFolder = gui.addFolder("Colouring");
colourFolder.add(visualSettings, "hasBorder").name("Add Border");
colourFolder.addColor(visualSettings, 'fillColour').name("Fill Colour");
colourFolder.addColor(visualSettings, 'strokeColour').name("Border Colour");

//// ---- BARS.JS CODE ---- ////
// - Documentation - https://github.com/jhancock532/bars.js
let mV = new MusicVisualiser(100,"audioPlayer");

//// ---- P5JS CODE ---- ////
// - Documentation - https://p5js.org/reference/

function setup(){
  createCanvas(windowWidth, windowHeight); 
  colorMode(HSB, 360, 100, 100, 1); 
  mV.setAudioFileURL("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/ivan-ibarra_-_cultos-personales.ogg");
  //mV.loadDefaultSoundFile();
}

function draw(){
  background(100);
    if (visualSettings.hasBorder){
    stroke(visualSettings.strokeColour.h, 
           visualSettings.strokeColour.s*100, 
           visualSettings.strokeColour.v*100);
  } else {
    noStroke();
  }
  
  fill(visualSettings.fillColour.h,
       visualSettings.fillColour.s*100,
       visualSettings.fillColour.v*100);
  
  mV.updateFrequencyData();
  for (let i = 0; i < mV.numberOfBars; i++){
    displayBar(i, mV.barHeights[i]);             
  }
}

function displayBar(barNo, barHeight){
  let bottomLeftX = windowWidth * visualSettings.xOffset,
      bottomLeftY = windowHeight * (visualSettings.yOffset + visualSettings.height),
      barWidth = windowWidth * visualSettings.width / mV.numberOfBars;
  
  rect(bottomLeftX + barNo * barWidth, bottomLeftY, 
       barWidth, - visualSettings.height * windowHeight * barHeight);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>
<script src="https://codepen.io/jhancock532/pen/MXNvZa"></script>

style.css

/* Make the canvas element fill the screen. */
canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  margin: 0;
  z-index: -1;
}