let lyricsButtons = [];

let lyricsValues = [

  {

  sound:'okay.wav',

  text:'hey',

  beats: 5,

    duration: 120,

}, {

  sound:'ka.wav',

  text:'lala',

  beats: 30,

  duration: 100,

}]

let loadedLyrics = []

​

​

​

function preload() {

  //lyrics

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

    if(lyricsValues[i].sound)

      loadedLyrics[i] = loadSound(lyricsValues[i].sound)

  }

}

​

​

function setup() {

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

  createCanvas(400, 400);

  //lyrics

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

    lyricsButtons[i] = new lyrics(200, 200+ i*100, loadedLyrics[i], lyricsValues[i].beats, lyricsValues[i].text, lyricsValues[i].duration)

  }

​

}

​

function draw() {

  // lyrics

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

    lyricsButtons[i].place();

    if(lyricsButtons[i].lip1) {  

        if (i == 0){

         lyricsButtons[1].no();

           lyricsButtons[i].music();

        }

        else if (i == 1){

       lyricsButtons[0].no();

           lyricsButtons[i].music();

        }

    }

    else {

      lyricsButtons[i].no();

    }

  }

​

}

​

class lyrics {

​

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

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

    this.x = oneX;

    this.y = oneY;

    this.m = oneM;

    this.b = oneB;

    this.w = oneW;

    this.d = oneD

    this.button = createButton(this.w);

    this.lip1 = false;

    this.slide = createSlider(1, 4, 1, 0.1);

  }

​

  place() {

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

    this.slide.position(this.x - 3, this.y + 30);

    this.slide.style('width', '40px');

    this.slide.style('height', '2px');

    this.pit = this.slide.value()

​

  this.button.mouseClicked(()=> {

    this.lip1 = !this.lip1;

  })

  }

  music() {   

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

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

        this.m.rate(this.pit);

      this.m.play();

       }

  }

   no() {

    this.m.stop();

  }

}

​