let tempoList = ["100", 

                 "110",

                 "120",

                 "130",

                 "140",

                 "150"];

​

// Variable for tempo dropdown.

let tempoSelect;

​

// Boolean variable for melody playing state.

let isPlaying = false;

​

// Variable for Oscillator.

let osc;

​

function setup() {

  createCanvas(400,400);

  // Use the HSB color model.

  colorMode(HSB);

   // Initialize oscillators and place in oscillators array.

  for (let freq of frequencies) {

    osc = new Oscillator(freq);

    oscillators.push(osc);

  }

​

 // Tempo dropdown.

  tempoSelect = createSelect();

  tempoSelect.position(10, 435);

  tempoSelect.option(0);

​

  // Add possible tempos to dropdown options.

  for (let tempo of tempoList){

    tempoSelect.option(tempo);

  }

​

  // Text to prompt users to set tempo

  let p = createP('Step 1: Select tempo!');

  p.style("color", "black");

  p.position(10, 395);

​

  // Call setTempo() when selected.

  tempoSelect.changed(setTempo);

​

  // Play button.

 let playButton = createButton('🎵 Play your song when you are done! 🎶');

 playButton.position(width * 0.2, 540);

 playButton.mouseClicked(play);

  // Directions to input text.

let p2 = createP('Step 2: Type a name for your melody and click "Set name".');

p2.style("color", "black");

p2.position(10, 450);

    // Name of song input.

nameInput = createInput("Type a name and set");

    nameInput.position(10, 490);

    nameInput.size(200);

    // Name button.

let nameButton = createButton('Set name');

nameButton.position(250, 490);

nameButton.mouseClicked(setName);

​

  // Set the text style.

  textAlign(CENTER, CENTER);

  textSize(30);

}

​

function draw() {

 background(220);

  drawMelody();

​

  // Display melody name.

  fill(0);

  text(melody.name, width / 2, 50);

​

}

​

​

// Set tempo details.

function setTempo() {

  melody.tempo = tempoSelect.selected();

  noteDuration = 60 / melody.tempo;

}

​

// Set name of melody.

function setName(){

  melody.name = nameInput.value();

}

​

​