Visualizzazione di file MIDI

    let sequencer = window.sequencer;
let song;

let velocities = [];
let noteDiamMax = 90; // diametro massimo del cerchio/nota

function setup() {
  createCanvas(670, 200);
  colorMode(HSL);

  for (let n = 0; n < 96; n++) {
    velocities[n] = 0;
  }

  loadMIDIFile( "mozk545a.mid" );
}

function draw() {
  background(100);
  noStroke();
  fill(0);
  for (let n = 24; n < velocities.length; n++) {
    let v = velocities[n];
    let x = (n - 36) * 12;

    let noteHue = map(n, 24, 95, 270, 600) % 360;
    let noteDiamPerc = map(v, 0, 127, 0, 1);
    fill(noteHue, 100, 50, 0.5);
    circle(x, height / 2, noteDiamPerc * noteDiamMax);

    if (velocities[n] > 0) {
      velocities[n] -= 1;
    }
  }
}

function noteOn(note, velocity) {  // quando inizia una nota...
  velocities[note] = velocity;
}

function noteOff(note) {  // quando finisce una nota...
  velocities[note] = 0;
}

function loadMIDIFile(midiURL) {
  sequencer.addMidiFile({ url: midiURL }, function (midifile) {

    song = sequencer.createSong(midifile);

    song.addEventListener("event", "type = NOTE_ON", function (event) {
      noteOn(event.noteNumber, event.velocity);
    });

    song.addEventListener(
      "event",
      "type = NOTE_OFF AND bar > 3",
      function (event) {
        noteOff(event.noteNumber);
      }
    );

    song.play();
  });
}

document.onvisibilitychange = function() {
   if (document.visibilityState === 'visible') {
    song.play();
  } else {
    song.pause();
  }
};