let type; 

let back;

​

let bor;

let wid;

​

//sound

let beat = 30

let x;

let y = 0

let soundButtons = [];

let soundValues = [

  {

  sound:'okay.wav',

  text:'hey',

  beats: 8,

}, {

  sound:'Perc-Maroc.wav',

  text:'lala',

  beats: 10,

}, {

  sound:'Perc-Maroc.wav',

  text:'noo',

  beats: 8,

}, {

  sound:'Perc-Maroc.wav',

  text:'fuck',

  beats: 6,

}, {

  sound:'Perc-Maroc.wav',

  text:'die',

  beats: 13,

}, {

  sound:'Perc-Maroc.wav',

  text:'ok',

  beats: 20,

}, {

  sound:'Perc-Maroc.wav',

  text:'mf',

  beats: 6,

}, {

  sound:'Perc-Maroc.wav',

  text:'fun',

  beats: 1,

}, {

  sound:'Perc-Maroc.wav',

  text:'dead',

  beats: 9,

}, {

  sound:'Perc-Maroc.wav',

  text:'wee',

  beats: 13,

}, {

  sound:'Perc-Maroc.wav',

  text:'bdf',

  beats: 20,

}, {

  sound:'Perc-Maroc.wav',

  text:'fff',

  beats: 6,

}, {

  sound:'Perc-Maroc.wav',

  text:'go',

  beats: 1,

}, {

  sound:'Perc-Maroc.wav',

  text:'why',

  beats: 9,

}]

let loadedSounds = []

​

​

//lyrics

let lyricsButtons = [];

let lyricsValues = [

  {

  sound:'okay.wav',

  text:'hey',

  beats: 5,

    duration: 120,

}, {

  sound:'Perc-Maroc.wav',

  text:'lala',

  beats: 30,

  duration: 100,

}, {

  sound:'Perc-Maroc.wav',

  text:'lala',

  beats: 30,

  duration: 100,

}, {

  sound:'Perc-Maroc.wav',

  text:'sf',

  beats: 30,

  duration: 100,

}, {

  sound:'Perc-Maroc.wav',

  text:'ffe',

  beats: 30,

  duration: 100,

}, {

  sound:'Perc-Maroc.wav',

  text:'dwes',

  beats: 30,

  duration: 100,

}]

let loadedLyrics = []

​

let bor3

let xl;

let yl = 0

​

​

​

function preload() {

  //font

  type = loadFont('VT323-Regular.ttf');

  back = loadImage("AltJ-04.png")

  //sound

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

    if(soundValues[i].sound)

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

  }

  //lyrics

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

    if(lyricsValues[i].sound)

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

  }

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  image(back, 0,0, windowWidth)

  b1 = color(190, 235, 233);

  b2 = color(211, 217, 240);

  bor = 0.04*windowWidth

   x= bor

   wid = 0.09*windowWidth

  bor3 = 0.33*windowWidth

  xl = bor3

  //sound

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

    soundButtons[i] = new sound(x, height-200+y, loadedSounds[i], soundValues[i].beats, soundValues[i].text)

     if (x > windowWidth-bor-177-100) {

      x= bor-185 

      y = y+ 80

    }

    x = x+185

  }

​

   //lyrics

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

    lyricsButtons[i] = new lyrics(xl, 65+yl, loadedLyrics[i], lyricsValues[i].beats, lyricsValues[i].text, lyricsValues[i].duration)

     if (xl >= width-500) {

      xl= bor3-295

      yl = yl+ 120

    }

    xl = xl+295

  }

​

​

}

​

function draw() {

 //background

 // setGradient(0, 0, width, height, b1, b2);

  // sounds

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

    soundButtons[i].place();    

    if(soundButtons[i].lip1) {  

      soundButtons[i].music();

    }

  }

   // lyrics

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

    lyricsButtons[i].place();

    if(lyricsButtons[i].lip1) {  

      lyricsButtons[i].music();

    }

    else {

      lyricsButtons[i].no();

    }

  }

​

}

​

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("width", "177px");

    this.button.style("font-size", "16px");

  this.button.mouseClicked(()=> {

    this.lip1 = !this.lip1;

  })

  }

  music() {   

      console.log('AM I CALLED')

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

       console.log('yes i am')

      this.m.play();

       }

  }

}

​

// function setGradient(x, y, w, h, c1, c2) {

//   noFill();

//   for (let i = x; i <= x + w; i++) {

//     let inter = map(i, x, x + w, 0, 1); //add volume (var)  -- last parameter (0-1)

//     let c = lerpColor(c1, c2, inter);

//     stroke(c);

//     line(i, y, i, y + h);

//   }

// }

​

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.button.style("width", "280px");

   this.button.style("font-size", "16px");

    this.slide.position(this.x, this.y + 75);

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

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

    this.slide.style('-webkit-appearance', 'none');

    this.slide.style('background', '#333333');

    this.slide.style('outline', 'none');

​

    this.pit = this.slide.value()

​

  this.button.mousePressed(()=> {

    this.lip1 = !this.lip1;

   // this.button.style("width", "280px");

  })

  }

  music() {   

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

    this.button.style("colour", "#0000ff");

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

        this.m.rate(this.pit);

      this.m.play();

       }

  }

   no() {

    this.m.stop();

  }

}

​

​