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 analyser = new Tone.Analyser(256, "waveform");
analyser.returnType = "float";

function setup(){
	createCanvas(300, 300);
	//open up the microphone
	var mic = new Tone.Microphone().open().start().connect(analyser);
}

function draw(){
  background(255);
	//draw the current level using the meter
	var analysis = analyser.analyse();
	fill(0);
	//rect(0, height - level * height, width, height);
	strokeWeight(3);
	var segWidth = width / analysis.length;
  var lastY = height/2;
  for (var i = 1; i < analysis.length; i++){
  	var startX = (i - 1) * segWidth;
    var endX = i * segWidth;
		var y = map(analysis[i], -1, 1, height, 0);
  	line(startX, lastY, endX, y);
  stroke(0);
    lastY = y;
  }

}