Karaoke one line

Karaoke one line

by Doãn Tài

HTML

<div class="app">
  <div class="aud-control">
    <audio src="http://codemoingay.com/wp-content/uploads/2019/06/Goi-Ten-Em-Trong-Dem.mp3" id="audio" controls></audio>
  </div>
  <div id="karaoke"></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  width: 100%;
  height: auto;
}

.aud-control {
  display: block;
  text-align: center;
  margin-top: 100px;
}

#karaoke {
  display: block;
  text-align: center;
  margin-top: 50px;
}

#karaoke .kara-text,
#karaoke .kara-text-highlight {
  display: inline-block;
  font-size: 50px;
  white-space: nowrap;
}

#karaoke .kara-text {
  position: relative;
}

#karaoke .kara-text-highlight {
  position: absolute;
  top: 0;
  left: 0;
  color: violet;
  text-shadow: 0px 0px 20px violet;
  overflow: hidden;
}

JavaScript

var audio = document.getElementById('audio');
var karaoke = document.getElementById('karaoke');
var lineIndex = 0;
var curentLyric, karaText, karaTextHighlight, audInterval;

var lyrics = [
  ['Đêm nghe hạt mưa rơi', 23.516146, 25.81885], // 0
  ['Lòng chợt nhớ em vô cùng', 26, 30.344052], // 1
  ['Chuyện tình ngày ấy không sao quên được', 32.214654, 37.483969], // 2
  ['Giờ hai ta ở hai nơi', 40.39815, 42.47749], // 3
  ['Lòng người có nghĩ đến bao giờ?', 43, 49], // 4
  ['Lúc trước anh ra đi là có lý do.', 49, 55], // 5
  ['Nếu biết trước tương lai anh đã chẳng yêu em,', 57, 61], // 6
  ['Nhưng con tim anh đây thật không sao quên được em người ơi.', 61, 65], // 7
  ['Nước mắt đã rơi vì nhớ em mong em trong từng đêm vắng,', 65, 69], // 8
  ['Mong cho em luôn được hạnh phúc nơi phương trời xa.', 70, 74], // 9
  ['Gọi tên em trong đêm,', 74, 77], // 10
  ['Trái tim này xót xa.', 77, 78], // 11
  ['Người yêu ơi hãy quên những năm tháng êm đềm hôm nào.', 79, 82], // 12
  ['Gọi tên em trong đêm để mình anh chịu nỗi đắng cay,', 83, 87], // 13
  ['Một thế giới khác mang anh đi, chẳng thể nào có em.', 88, 93], // 14
  ['Gọi tên em trong đêm,', 94, 96], // 15
  ['Sẽ chẳng thể có nhau.', 96, 98], // 16
  ['Tình duyên ta thế thôi, chắc có lẽ đã được an bài.', 98, 102], // 17
  ['Gọi tên em trong đêm để mình anh chịu nỗi đớn đau,', 102, 106], // 18
  ['Một thế giới khác mang anh đi, chia đôi tình chúng ta.', 107, 113], // 19
  ['Cách xa hai phương trời!', 113, 118], // 20
];

audio.addEventListener('play', function () {
  audInterval = setInterval(function () {
    if (!curentLyric) {
      return;
    }

    var startTime = curentLyric[1];
    var endTime = curentLyric[2];

    if ((audio.currentTime - startTime) >= 0) {
      var duration = endTime - startTime;
      if (endTime - audio.currentTime > 0) {
        var ratio = ((100 / duration) * (endTime - audio.currentTime)) - 100;
        karaTextHighlight.style.width = ratio * -1 + '%';
      } else {
       ...