​

const scale = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];

​

​

function setup() {

  createCanvas(400, 400);

  audioContext = getAudioContext();

  mic = new p5.AudioIn();

  mic.start(startPitch);

}

​

function startPitch() {

  pitch = ml5.pitchDetection('./model/', audioContext, mic.stream, modelLoaded);

}

​

function modelLoaded() {

  select('#status').html('Model Loaded');

  getPitch();

}

​

function getPitch() {

  pitch.getPitch(function(err, frequency) {

    if (frequency) {

      midiNum = freqToMidi(frequency);

      currentNote = scale[midiNum % 12];

      select('#currentNote').html(currentNote);

      select('#midiNum').html(midiNum);

    }

    getPitch();

​

  })

}

​

​

function draw() {

  background(240);

  noStroke();

  fill(0);  

  var note = map(midiNum, 40, 95, height, 0);

  if (midiNum) {

    rect(width/2, note, 10, 10);

  }

}