Play,Magenta!

Please check out "Hello, Magenta" before reading if you haven't!

We want to make it easy for hackers to build similar experiences with Magenta models. So we build this playground app where you can edit the sounds and canvas with the editor live in your browser.

The music is created using magenta.js. The sounds are created using Tone.js. The visualization is created with native canvas API provided by browsers. Please check out the documentation of Tone.js to see what you can do with the sounds, and canvas tutorials provided by MDN for visual. They are both super interesting and powerful.

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();
}

You're now ready to build your own amazing, Machine Learning powered, music instrument! If you want more information, you can check out...

some demos #MadeWithMagenta
the documentation
the Magenta blog, which talks about all the mathy bits we skipped.

Have fun! 💕