Hát karaoke bài hát bất kì chỉ bằng HTML và JavaScript

6160
Hát karaoke bằng HTML và JavaScript

Karaoke là một hình thức giải trí rất thông dụng. Sau những giờ làm việc mệt mỏi hay khi gặp stress, chúng ta thường tìm đến những ca khúc karaoke để thư giãn sau giờ làm việc vất vả.

Hôm nay mình sẽ cùng các bạn tự tạo ra một tool hát karaoke bằng HTML và Javascript vô cùng đơn giản mà không cần phải ra quán nhé!

Bắt đầu thôi!

  Vẽ biểu đồ (chart) cho trang web bằng HTML và Google Charts
  First-class functions trong Javascript là gì? (Phần 1)

Ý tưởng

Để có thể hát karaoke thì bắt buộc phải có 2 phần chính là bài hát và lời bài hát.

Mục đính chính của chúng ta là sẽ upload 1 file mp3 lên, và handlefile để thẻ <audio> của HTML5 có thể load nó.

Xem thêm các thư viện HTML5 Video Player mới nhất.

Còn xử lý lời bài hát mới quan trọng. File lời bài hát sẽ phải có định dạng như sau: Hát karaoke bằng HTML và JavaScript

File lời 2 bài này sẽ đc xử lỹ thành 2 phần với 2 mục đích khác nhau. Một là xử lý đống text đó để hiển thị ra màn hình bằng 1 hàm custom có tên là simple_format, nghe giống hàm trong rails nhỉ. Nhưng hàm này sẽ tự define trong file js của chúng ta nhé.

Còn phần thứ 2 là chúng ta sẽ xử lý đống lời bài hát kia thành các mảng lồng nhau. Trong đó mỗi dòng cũng là 1 mảng có 2 mảng con, 1 mảng cho timing để so sánh với current_time của bài hát, còn lại là lời bài hát.

Và để cho từng câu chạy theo đúng nhạc thì chúng ta phải lấy ra được current time của bài hát khi đang play. Và so sánh với time running của lời bài hát.

Demo

Ý tưởng có vẻ dài dòng và lan man nhỉ, chi bằng demo luôn cho dễ hiểu nhé các bạn.

Mình có quay 1 đoạn video demo cho các bạn đây (xin lỗi vì phần mềm quay video trên ubuntu của mình k ghi được âm thanh):

Xem demo mà không có âm thanh thì cũng khó chịu nhỉ, chi bằng các bạn demo trực tiếp sản phẩm luôn có phải ngon hơn không:

Các bạn có thể demo sản phẩm ở Đây

Bạn có thể tải nhạc và lời bài hát mà mình đã chuẩn bị sẵn để demo luôn: Lời bài hát và Bài hát.

Để lấy được file lời bài hát theo đúng format trên một cách nhanh nhất, các bạn hãy xem phần READ ME ở phần demo nhé.

Một số hàm xử lý chính

Vì phần code js khá dài (độ 270 dòng) lên mình sẽ không đưa hết lên đây cho các bạn xem được. Vì vậy nên mình sẽ show cho các bạn xem một số hàm xử lý chính để các bạn hiểu được cơ bản cách các hoạt động nhé.

Bạn có thể tham khảo source code đầy đủ ở đây nhé.

Handle File mp3

Sau khi bấm vào upload file mp3 thì thẻ <audio> của HTML5 sẽ tự động load bài hát (xem demo)

Xử lý lời bài hát

Sau khi upload nốt file lời bài hát là bấm play thì lời hài hát sẽ được fill ra màn hình (xem demo):

Function simple_format mình đã nhắc đến ở trên:

Xử lý Current Time của bài hát

Xử lý current_time của bài hát giống với định dạng của phần timing của lời bài hát:

Xử lý chữ chạy theo bài hát

Đây là phần quan trọng nhất. Mình đã lược bỏ một số đoạn code trước khi show đoạn code dưới đây vì nó khá dài. Các bạn có thể xem code đầy đủ mà mình đã đưa ra ở trên.

Kết thúc

Trên đây mình đã giới thiệu cho các bạn 1 tool hát Karaoke bằng HTML và JavaScript khá vui để có thể nghịch những lúc rảnh rỗi.

Cảm ơn các bạn đã đọc bài viết!

Có thể bạn quan tâm:

Xem thêm việc làm Software Developers hot nhất trên TopDev

TopDev via viblo

  Pentest Web - Tôi đã chiếm quyền admin của một trang web như thế nào?
  8 cách tối ưu hoá JavaScript mọi lập trình viên đều phải biết
SHARE