song_animation

by Abhi9kt

HTML

<div class="inputDiv">
  <rect id="dummy" x='0' y='0' width='0', height='0'></rect>
  <textarea id="song" style="display:none;">
    [G]Tujhse hi to mili rahat|
    [E]Tu hi to meri hai chahat|
    [C]Tujhse se hi to judi|
    [D]Zindagi|
    [G]Teri yaadein hai kuch adhoori|
    [E]Saans aadhi hai kuch hai poori|
    [C]Aankhon me hai kaise|
    [D]Ye nami|
    [G]Mera mann...|
    [E]Kehne Laga...|
    [C]Paas aake na tu door|
    [D]Jaa...|
    [G]Choone de...|
    [E]Honth tere...|
    [C]Zara saanson me apni|
    [D]Basa...|
    [G]Hmmmm... Tujhe apna bana loon|
    [E]Tujhe tujh se chura loon|
    [C]Tujhe kudh me chupaloon|
    [D]Sahibaa...|
    [G]Ek mujh pe karam ho|
    [E]Tu hi mera sanam ho|
    [C]Teri mujh pe nazar ho|
    [D]Sahiba...|
    [G]Hmmmm...|
    [E]Hmmmm...|
    [C]Hmmmm...|
    [D]Hmmmm...|
    [G]Mar main jaunga.. reh na paunga..|
    [E]Gam judai ka seh na paunga|
    [C]Hai tujhe pyaar ka|
    [D]Vastaa...|
    [G]Teri yaadein hai kuch adhoori|
    [E]Sans aadhi hai kuch hai poori|
    [C]Aankhon me hai kaisi|
    [D]Ye nami|
    [G]Raat ke...|
    [E]Chaand tale...|
    [C]Aagosh me meri|
    [D]Tu aa...|
    [G]Baanhon me|
    [E]Lelo mujhe...|
    [C]Zara sapno me apne|
    [D]Basa...|
    [G]Mera mann...|
    [E]Kehne Laga...|
    [C]Paas aake na tu door|
    [D]Jaa...|
    [G]Choone de...|
    [E]Honth tere...|
    [C]Zara saanson me apni|
    [D]Basa...|
  </textarea>
</div>
<div id="animationDiv">
  <div class="content">
    <div id="lyrics">
      <span class="line-0 lineAnimation"></span>
      <span class="line-1 lineAnimation"></span>
      <span class="line-2 lineAnimation"></span>
      <span class="line-3 lineAnimation"></span>
      <span class="line-4 lineAnimation"></span>
    </div>

    <div class="lineChord">
      <span id="chordName">G</span>
    </div>
  </div>
</div>

<div id="titlePage">
  <div class="content">
    <span class="text titleLine1">Mera Mann Kehne Laga</span>
    <span class="line...

CSS

html {
  padding: 0px 0px;
  margin: 0px 0px;
  width: 100vh;
  height: 100vh;
  font-size: 20px;
}

.inputDiv {
  width: 0vh;
  height: 0vh;
  margin: 5px 5px;
  padding: 0px 0px;
  display: none;
}

.line {
  background: #333;
  height: 0.1em;
}

/* TITLE PAGE */

#titlePage {
  overflow: none;
  opacity: 0;
  display: none;
}

#titlePage .content {
  display: flex;
  height: 100vh;
  width: 60vh;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 2em;
}

#titlePage .labelMusicBy {
  font-size: 1em;
}

/* CHORDS TITLE PAGE */
#chordsTitlePage {
  overflow: none;
  opacity: 0;
  display: none;
}

#chordsTitlePage .content {
  display: flex;
  height: 100vh;
  width: 60vh;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 2em;
}

/* CHORDS PAGE */
#chordsPage {
  width: 100vh;
  height: 100vh;
  display: none;
  opacity: 0;
}
#chordsPage .content {
  overflow: none;
  height: 100vh;
  width: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#chordsPage .chord {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  flex-basis: 30%;
  height: 40%;
  border: solid 1px;
}

#chordsPage .line {
  height: 1px;
}

#chordsPage .text {
  font-size: 2em;
}

/* COUNTDOWN PAGE */
#countDownPage {
   width: 100vh;
   height: 100vh;
   display: none;
   opacity: 0;
}

#countDownPage .content{
  height: inherit;
  width: inherit;
  text-align: center;
  display: flex;
  font-size: 2em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.countDownWrapper {
  width: 60vh;
  display: flex;
  flex-direction: column;
}

/* SONG PAGE */

#animationDiv {
  width: 100vh;
  height: 100vh;
  padding: 5px 5px;
  margin: 5px 5px;
  display: none;
  opacity: 0;
}

#animationDiv .content {
  display: flex;
  direction: row;
}

#lyrics {
  flex-grow: 2;
  height: 100vh;
  display: flex;
 ...

JavaScript

window.onload = function() {
  song = d3.select("#song").property('value');
  lines = song.split('|');
  svg = d3.select('#lyrics');
  var chords = [];
  var songLines = [];
  var lineX = 30, lineY = 30;
  linesBuffer = [];

  for (let i = 0; i < lines.length; i++) {
    line = lines[i].trim();
    if (!line) break;
    const chordRegex = /\[([\w]{1,})\]/gm;
    const songLineRegex = /\]([\w .]*)/gm;
    chords.push(chordRegex.exec(line)[1]);
    songLines.push(songLineRegex.exec(line)[1]);
    textClass = ".line-" + (i % 5);
    lineY += 20;
  }
  
  let lineNumber = 0;
  
  
  
/*   anime({
    targets: '#dummy',
    translateX: 100,
    delay: 0,
    endDelay: 0,
    duration: 1000,
    direction: 'alternate',
    loop: true,
    changeBegin: function(anim) {
      let textClass = ".line-" + lineNumber % 5;
      if (lineNumber >= songLines.length) lineNumber = 0;
      d3.select(textClass).text(songLines[lineNumber]);
      d3.select('#chordName').text(chords[lineNumber]);
      tones.play('g');
      lineNumber += 1;
    }
  }); */

/* 	anime({
	    targets: '.lineAnimation',
	    opacity: 1,
	    delay: (el, i) => {
	      let j = i % 5;
	      let textClass = ".line-" + j;
	      d3.select(textClass).text(songLines[i]);
	      console.log(songLines[i]);
	      return 1000 * j;
	    }
	  }); */
    
var timeLine = anime.timeline({
    easing: 'easeInOutQuad',
    duration: 2000
    });
  
  timeLine.add({
    targets: '#titlePage',
    opacity: 1,
    begin: function(anim) {
      d3.select('#titlePage').style('display', 'block');
    },
    complete: function(anim) {
      d3.select('#titlePage').style('display', 'none');
    }
  });
  
  timeLine.add({
    targets: '#chordsTitlePage',
    opacity: 1,
    begin: function(anim) {
      d3.select('#chordsTitlePage').style('display', 'block');
    },
    complete: function(anim) {
      d3.select('#chordsTitlePage').style('display', 'none');
    }
  });
  
  timeLine.add({
    targets: '#chordsPage',
   ...