let first = 262;

​

// Array of frequencies in the key of C Major.

let frequencies = [

  first,

  first * 9/8,

  first * 5/4,

  first * 4/3,

  first * 3/2,

  first * 5/3,

  first * 15/8,

  first * 2

];

​

// Number of notes in the scale.

let numNotes = frequencies.length;

​

// Empty array for Oscillator objects.

let oscillators = [];

​

// JSON object to play C Major Scale.

let melody = {

  name: 'C Major Scale',

  notes: [0, 1, 2, 3, 4, 5, 6, 7],

  tempo: 100,

};

​

// Number of notes in the melody.

let numIntervals = melody.notes.length;

​

// Calculate duration of each note in seconds.

let noteDuration = 60 / melody.tempo;

​

​

// Plays a note.

function playNote(n) {

  // Start oscillator if needed.

  if (oscillators[n].started === false) {

    oscillators[n].start();

  }

  // Starts playing the note by increasing the volume with 0.01s fade-in.

  oscillators[n].amp(1, 0.01);

  // Stop the note after noteDuration * 1000 milliseconds.

  setTimeout(function() { stopNote(n); }, noteDuration * 1000);

}

​

// Stops playing the note.aab

function stopNote(n) {

  // Lower oscillator volume to 0.

  oscillators[n].amp(0, 0.01);

  // Stop the oscillator.

  oscillators[n].stop();

}

​

// Plays the notes in a melody.

function play() {

  // Read each note in the melody.

  for (let i = 0; i < melody.notes.length; i += 1) {

    // Get the note.         

    let note = melody.notes[i];

​

    // Play each note noteDuration * 1000 * i milliseconds after code runs.

    setTimeout(function() { playNote(note); }, noteDuration * 1000 * i);

  }

}

​

​

// Melody visualizer.

function drawMelody() {

  let gridSize = width / numIntervals;

  for (let t = 0; t < numIntervals; t += 1) {

    // Draw from left to right.

    let x = t * gridSize;

​

    for (let n = 0; n < numNotes; n += 1) {

      // Draw from bottom to top.

      let y = height - (n + 1) * gridSize;

      // Set the fill color.

      if (melody.notes[t] === n) {

        let h = map(n, 0, numNotes, 300, 360);

        fill(h, 100, 100);

      } else {

        fill('white');

      }

​

      // Draw a rounded square.

      square(x, y, gridSize, 10);

    }

  }

}

​

​