Playing with sound

Visualize the spectrum

by blackpolygon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
<html>

  <head>
    <title>Playing with sound</title>
  </head>

  <body>
    <canvas id="canvas"></canvas>
  </body>

</html>

CSS

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
  background: #170350;
}

JavaScript

var canvas, ctx, mic, fft, spectrum;

function setup() {
  canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;
  ctx.strokeStyle = "#C00";

  mic = new p5.AudioIn()
  mic.start();
  fft = new p5.FFT(0.7);
  fft.setInput(mic);

}

function draw() {
  // Clear the previous drawing  
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // We need to call analyze before doing the next computations
  spectrum = fft.analyze();

  ctx.beginPath();
  for (var i = 0; i < spectrum.length; i++) {
    var y = canvas.height / 2 - spectrum[i];
    ctx.lineTo(i * 2, y);
  }
  ctx.stroke();
  ctx.closePath();
}