* A simple sound visualization template for CSE412

 * 

 * Update these comments yourself once your own program 

 *

 * By Professor Jon E. Froehlich

 * https://jonfroehlich.github.io/

 * http://makeabilitylab.cs.washington.edu

 **/

​

​

let mic;

​

function setup() {

  createCanvas(600, 400);

  // Gets a reference to computer's microphone

  // https://p5js.org/reference/#/p5.AudioIn

  mic = new p5.AudioIn();

​

  // Start processing audio input

  // https://p5js.org/reference/#/p5.AudioIn/start

  mic.start();

  // Helpful for debugging

  printAudioSourceInformation();

}

​

function draw() {

  background(180);

  drawFps();

}

​

​

function drawFps(){

  // Draw fps

  push();

  const fpsLblTextSize = 8;

  textSize(fpsLblTextSize);

  const fpsLbl = nf(frameRate(), 0, 1) + " fps";

  const fpsLblWidth = textWidth(fpsLbl);

  const xFpsLbl = 4;

  const yFpsLbl = 10;

  fill(30);

  noStroke();

  rect(xFpsLbl - 1, yFpsLbl - fpsLblTextSize, fpsLblWidth + 2, fpsLblTextSize + textDescent());

​

  fill(150);

  text(fpsLbl, xFpsLbl, yFpsLbl);

  pop();

}

​

function printAudioSourceInformation(){

  let micSamplingRate = sampleRate();

  print(mic);

​

  // For debugging, it's useful to print out this information

  // https://p5js.org/reference/#/p5.AudioIn/getSources

  mic.getSources(function(devices) {

    print("Your audio devices: ")

    // https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo

    devices.forEach(function(device) {

      print("  " + device.kind + ": " + device.label + " id = " + device.deviceId);

    });

  });

  print("Sampling rate:", sampleRate());

​

  // Helpful to determine if the microphone state changes

  getAudioContext().onstatechange = function() {

    print("getAudioContext().onstatechange", getAudioContext().state);

  }

}