JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>
<script src="//tonejs.github.io/CDN/r6/Tone.min.js"></script>

JavaScript

var binsize = 256
//must be a divisible of two
var analyser = new Tone.Analyser(binsize, "fft");
//

function makeSound(){
  var synth = new Tone.SimpleSynth().toMaster().connect(analyser);
  synth.osccilator.type = "square";
  var loop = new Tone.Loop(function(time){
    synth.triggerAttackRelease("C2", 0.1, time);
  }, 0.4).start(0);

  Tone.Transport.start();
}

function setup(){
	createCanvas(300, 300);
  makeSound();
}

function draw(){
  background(255);
  //draw each band in the analyser
	var analysis = analyser.analyse();
  var barWidth = width / analysis.length;
  for (var i = 0 ; i < analysis.length; i++){
  	var x = i * barWidth;
    var h = map(analysis[i], 0, 255, 0, height);
  	rect(x, height - h, barWidth, height);
  }
}