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");


//powers of two
analyser.returnType = "float";
//prob dont need to use this
analyser.minDecibels = -30;
//float is between mid and max decibles...the smallest loudness and max is high end of volume, like doing a map for you
//change float to "byte"
// use not alot of byte
// analyzers, 50 if you only have any analyzers
// think about scale
//you get the analysis as an array


function setup(){
	createCanvas(300, 300);
	//open up the microphone
  var player = new Tone.Player("http://evejweinberg.github.io/anxiety/01_01.wav")
  
  Tone.Buffer.onload = function(){
	player.start().connect(analyser).toMaster();
}
 

}

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;
  }

}