Tạo ứng dụng hát karaoke bằng HTML5-Audio

Trong cuộc sống, đôi khi mình hay tìm vài trò vui vui để làm với công việc của mình, nó giúp mình giảm stress và cảm thấy công việc có ý nghĩa hơn. Mình thì cũng có chút sở thích về hát hò, mà công việc chính lại là coder, vậy nên hôm nay mình sẽ dùng code để viết ra một ứng dụng hát karaoke bằng HTML5-Audio kết hợp với Javascript và CSS. Nếu bạn quan tâm thì hãy xem bài viết này và cho mình thêm góp ý nhé!

1. Ý tưởng và thực hành

Sau khi ngồi nghe vài bài hát trên Zing-MP3, mình để ý ở trình player của nó có một chức năng là highlight các đoạn lời bài hát theo đúng giai điệu. Tính mình cũng tò mò, nên quyết định vận dụng mấy cái kiến thức về WEB của mình để làm ra một cái ứng dụng tương tự.

1.1 Chuẩn bị

# Đầu tiên, mình cần một thứ để có thể load được bài hát và control được nó (play, pause, seek). Thì trên HTML5 có một thành phần là audio hỗ trợ tất cả các yêu cầu mà mình mong muốn nên mình sẽ dùng thằng này.

<audio></audio>

# Tiếp theo, mình cần một tập các đoạn lời trong bài hát. Cái này thì mình phải tự tạo bằng tay. Mình tạo ra một mảng gồm các mảng con, mỗi mảng con chứa thông tin của một đoạn lời bài hát gồm [lời bài hát, thời gian bắt đầu, thời gian kết thúc]. Tạo kiểu mảng như vậy thì sẽ dễ xử lý hơn.

var lyrics = [
  ['Đêm nghe hạt mưa rơi', 23.516146, 25.81885],
  ['Lòng chợt nhớ em vô cùng', 26, 30.344052],
  // ...
];

1.2 Xử lý logic

# Khi các bạn play hoặc seek đoạn nhạc đến các khoảng thời gian khác nhau, thì cần tính toán xem sẽ hiển thị đoạn lời nào ra. Mình viết một hàm tạm đặt tên là findLyricIndex để làm nhiệm vụ này.

var audio = document.getElementById('audio');

var lyrics = [
  ['Đêm nghe hạt mưa rơi', 23.516146, 25.81885],
  ['Lòng chợt nhớ em vô cùng', 26, 30.344052],
  // ...
];

// ...

var findLyricIndex = function () {
  if (audio.currentTime === 0) {
    return 0;
  }
  for (var i = 0; i < lyrics.length; i++) {
    if (audio.currentTime >= lyrics[i][1] && audio.currentTime <= lyrics[i][2]) {
      return i;
    } else if (lyrics[i][1] >= audio.currentTime) {
      return i;
    }
  }
  return lyrics.length;
}

# Khi đoạn nhạc play, mình sẽ chạy một hàm interval. Hàm này liên tục cập nhật thời gian hiện tại của đoạn nhạc và tính toán thời gian bắt đầu, kết thúc của lời bài hát để cập nhật hiệu ứng highlight.

var lineIndex = 0;
var curentLyric, karaText, karaTextHighlight, audInterval;

// ...

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 {
        lineIndex++;
        nextLine(lineIndex);
      }
    }
  }, 1000 / 60);
});

var nextLine = function (index) {
  if (!lyrics[lineIndex]) {
    return;
  }

  var lyric = lyrics[index];

  karaText.textContent = lyric[0];
  karaTextHighlight.textContent = lyric[0];
  karaTextHighlight.style.width = '0%';

  curentLyric = lyric;
}

# Còn cái hiệu ứng highlight text thì mình sẽ lợi dụng thuộc tính position của css để tạo ra hai thẻ p nằm chồng lên nhau. Hai thẻ p đều có cùng nội dung text và có kích thước font chữ giống nhau. Thẻ p nằm trên sẽ có màu khác với thẻ p nằm dưới và thay đổi độ dài theo thời gian mà đoạn lời bài hát xuất hiện để tạo hiệu ứng highlight.

#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;
}

2. Thành quả: Ứng dụng hát karaoke bằng HTML5-Audio

3. Lời kết

Qua ứng dụng hát karaoke bằng HTML5-Audio này, mình mong các bạn sẽ có thêm ý tưởng để làm nhiều cái hay ho hơn. Những lúc mệt mỏi, stress thì hãy làm những điều gì đó khiến bản thân cảm thấy vui vẻ và hứng thú trở lại nhé. Chúc các bạn thành công!

Lưu ý: Bài hát trong ví dụ là bài “Gọi Tên Em Trong Đêm – The Men“. Nếu link của bài hát trong ví dụ bị die thì phiền các bạn thay 1 link khác để xem được ví dụ nhé. Thanks all!

2 Comments

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *