Share Source kèm hướng dẫn chỉnh sửa trình phát nhạc cá nhân. Tự tạo một trình phát nhạc cho mình hoặc Crush :v (Có thời gian sẽ edit lại cho chỉnh sửa list nhạc đơn giản hơn).

Mức độ khó: Trung bình.

Yêu cầu hiểu biết để chỉnh sửa:

  • HTML: Cơ bản
  • Javascript: Trung bình
  • CSS: Cơ bản

Link Source: MusicPlayer Repository (Github)

Demo: Demo Player

GIẢI THÍCH CODE

Mình sẽ không giải thích về HTML và CSS do không có gì phải giải thích cả 😐
Có 1 cái bạn cần lưu ý ở trang HTML đó chính là thẻ Meta Tag: viewport. Tại sao? Vì không có thẻ Meta này thì việc hiển thị trên các thiết bị điện thoại sẽ gặp vấn đề.

NOTE: Nếu muốn sửa nhạc, chỉ cần sửa variable songs(Array) theo dạng sau:

let songs = [{
artist: "Ca si 1",
// Tên Ca sĩ
name: "Ten bai hat 1",
// Tên Bài hát
url: "Link Nhac 1",
// Link file nhạc (flac, wav, mp3, ...)
picture: "Link Anh 1",
// Link ảnh hiển thị (vuông)
}, {
artist: "Ca si 2",
name: "Ten bai hat 2",
url: "Link Nhac 2",
picture: "Link Anh 2"},
...
];

Về Javascript, ở đây có các Functions sau:

  • shuffle
  • playPause
  • showHover
  • playFromClickedPos
  • checkBuffering
  • selectTrack
  • initPlayer

Hàm Shuffle:

Hàm này sẽ xáo thứ tự các item trong 1 Array theo thứ tự ngẫu nhiên. (Dành cho bạn nào muốn Xáo cái list nhạc trước khi nghe).

Hàm playPause:

Hàm này Handle event click vào nút Play/Pause. (Dừng nhạc / tiếp tục phát từ điểm dừng cuối cùng).

Hàm showHover:

Ở đây hàm này sẽ chịu trách nhiệm cho event click vào thanh trượt hiển thị thời lượng % bài nhạc đã phát (Click để phát từ chỗ vừa click chuột).

Khi click, 1 argument được truyền vào là thông tin của cái event. Trong Event này bao gồm vị trí click chuột (Event.clientX là vị trí chuột tính theo chiều ngang của web (Mục đích tìm xem chuột di vào vị trí nào mà tính thời gian)). seekT chính là khoảng cách từ điểm bắt đầu của thanh hiển thị tới điểm của chuột. seekLoc là giá trị tính bằng giây.

Hàm này sẽ bị GỌI LIÊN TỤC khi chuột hover trên thanh trượt. (Mục đích là để set giá trị)

Hàm hideHover:

Chuột đi ra khỏi thanh trượt sẽ gọi event này. Mục đích là để set lại cái dải hiển thị phần chuột đã select (từ điểm bắt đầu tới vị trí chuột) về điểm bắt đầu (sHover.width = 0).

Ngoài ra event này cũng set các text đếm thời gian về điểm bắt đầu.

Hàm updateCurrTime:

Gọi để set thời gian, nếu đủ 100% (hết bài) thì chuyển bài và set thời gian về bắt đầu.

Hàm checkBuffering:

Kiểm tra nhạc đã load xong chưa.

Hàm selectTrack:

Chuyển bài (tiến/lùi). Thực chất chỉ là tăng giảm biến currIndex và set các giá trị theo currIndex.

Hàm initPlayer:

Bắt đầu player và gán tuần tự các events.

Player được chỉnh sửa/phát triển từ nguồn giao diện của: CodePen

 

Link post: https://www.facebook.com/groups/j2team.community/permalink/1183300195335432/

  • Nếu bạn đang có mong muốn kéo dài thời lượng Story, MonokaiToolkit Beta sẽ là một ứng dụng mà bạn không nên bỏ lỡ. Trong đó không thể không đề cập tới tính năng Đăng story dài, thách thức mọi thời lượng với dung lượng Video lên tới 10 GB.

    Continue reading
  • Chắc hẳn người dùng Facebook đã không hề lấy làm […]

    Continue reading
  • Phiên bản Beta ra mắt lần này kế thừa những tính năng chính của MonokaiToolkit và tiếp nối những tính năng cũ cùng hoàn thiện một số lỗi trước đây.

    Continue reading
  • Nếu bạn đang có mong muốn kéo dài thời lượng Story, MonokaiToolkit Beta sẽ là một ứng dụng mà bạn không nên bỏ lỡ. Trong đó không thể không đề cập tới tính năng Đăng story dài, thách thức mọi thời lượng với dung lượng Video lên tới 10 GB.

    Continue reading
  • Chắc hẳn người dùng Facebook đã không hề lấy làm […]

    Continue reading

3 Comments

  1. Nguyễn Sơn Dương Tháng Năm 24, 2020 at 7:13 sáng - Reply

    a Nhân ơi sao em up file lên web thì Buffering rất lâu ạ cho em xin cách khắc phục với

    • monokaijs Tháng Sáu 6, 2020 at 4:32 sáng - Reply

      Cái đấy do hosting thôi bạn nhé!

  2. Pro Sau anh nhân :v Tháng Sáu 11, 2020 at 6:37 sáng - Reply

    :>>thanks a

Leave A Comment