let beat = 30

​

let buttons = [];

let definedValues = [

  {

  sound:'okay.wav',

  text:'hey',

  beats: 8,

}, {

  sound:'Perc-Maroc.wav',

  text:'lala',

  beats: 10,

}]

​

let loadedSounds = []

​

​

function preload() {

  for(let i=0;i<definedValues.length;i++) {

    if(definedValues[i].sound)

      loadedSounds[i] = loadSound(definedValues[i].sound)

  }

}

​

​

function setup() {

  //console.log('LOADED SOUNDS', loadedSounds)

  createCanvas(400, 400);

  for(let i=0;i<loadedSounds.length;i++) {

    buttons[i] = new sound(200, 200+ i*100, loadedSounds[i], definedValues[i].beats, definedValues[i].text)

  }

​

}

​

function draw() {

  background(255, 0,0 )

  // sounds

  for(let i=0;i<buttons.length;i++) {

    buttons[i].place();

    if(buttons[i].lip1) {  

      buttons[i].music();

    }

  }

​

}

​

class sound {

​

  constructor(oneX, oneY, oneM, oneB, oneW) {

    // positionX, positionX, music, beats, words on buttons

    this.x = oneX;

    this.y = oneY;

    this.m = oneM;

    this.b = oneB;

    this.w = oneW;

    this.button = createButton(this.w);

    this.lip1 = false;

  }

​

  place() {

​

  this.button.position(this.x, this.y);

  this.button.style("background-color", "white");

 this.button.style("colour", "blue");

 this.button.style("border", "1px solid #000000");

 this.button.style("border-radius", "10px");

    this.button.style("width", "230px");

    this.button.style("height", "100px");

​

  this.button.mouseClicked(()=> {

    this.lip1 = !this.lip1;

  })

  }

  music() {   

      //console.log('AM I CALLED')

     if (frameCount % beat == this.b) {

      this.m.play();

       }

  }

}

​