Hi Magenta!

The music is created using magenta.js. The sounds are created using Tone.js.

The visualization is created with core.PianoRollCanvasVisualizer provided by magenta.js.

Sound

function draw(activeNote) {
  let ctx = canvas.getContext("2d");
  const { width, height } = ctx.canvas;
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "rgba(255, 255, 255, 1)";
  ctx.fillRect(0, 0, width, height);

if (sample) {
    drawModelData(ctx, 0, 0, width, height, sample, activeNote, minPitch, maxPitch);
  }
}

function drawModelData(ctx, x, y, w, h, data, activeNote, minPitch = 64, maxPitch = 127, noteShrinkRatio = 0.9) {
  if (minPitch > maxPitch) {
    let temp = minPitch;
    minPitch = maxPitch;
    maxPitch = temp;
  }

if (maxPitch - minPitch <= 36) {
    const gap = Math.floor((36 - (maxPitch - minPitch)) * 0.5);
    maxPitch += gap;
    minPitch -= gap;
  }
  const { notes } = data;
  const range = maxPitch - minPitch + 1;
  const hh = h / range;
  ctx.save();
  ctx.translate(x, y);
  for (let i = 0; i < notes.length; i++) {
    const totalQuantizedSteps = 32;
    const { pitch, quantizedStartStep, quantizedEndStep } = notes[i];

ctx.save();
    const xpos = (w * quantizedStartStep) / totalQuantizedSteps;
    const ypos = h * (1 - (pitch - minPitch + 1) / range);
    const ww =
      (noteShrinkRatio * (w * (quantizedEndStep - quantizedStartStep))) /
      totalQuantizedSteps;

ctx.fillStyle = "rgba(8, 41, 64, 1)";
    if (activeNote) {
      if (checkTheSameNotes(notes[i], activeNote)) {
        ctx.fillStyle = "rgba(240, 84, 119, 1)";
      }
    }
    // ctx.beginPath();
    // ctx.arc(xpos, ypos, ww * 0.5, 0, Math.PI * 2);
    // ctx.fill()
    ctx.fillRect(xpos, ypos, ww, hh);
    ctx.restore();
  }

ctx.restore();
}