Hướng dẫn làm web nhạc bằng code html chỉ qua mấy bước

Hướng dẫn làm web nhạc bằng code html giờ đấy rất đơn giản. Bạn hoàn toàn có thể up một bản nhạc vào website bằng mấy dòng mã. Bài viết dưới đây sẽ hướng dẫn làm web nhạc bằng code đơn giản nhất.

Hướng dẫn làm web nhạc bằng code html

  1. Vẽ giao diện

Giao diện khá đơn giản với vài thẻ form và div. Web được chia thành 2 phần chính, nửa bên trái là khung tìm kiếm bài hát, nửa bên phải là khung phát nhạc và danh sách bài hát request.

Đối với nửa bên trái, bạn tạo 1 form để cho người dùng nhập tên bài hát, bên cạnh thì làm luôn nút Clear để người dùng có thể xóa Tên bài hát sau khi nhập cho nhanh, đỡ phải nhấn backspace nhiều chi cho lâu. Bên dưới form nhập tên để tìm kiếm là 1 div để hiển thị danh sách kết quả tìm kiếm. Ở mỗi bài hát trong danh sách có 1 nút Add để thực hiện request bài nhạc mà bạn muốn nghe.

Đối với nửa bên phải, bạn tạo 1 div để Play video, bên dưới video sẽ là 1 div khác để chứa danh sách bài hát được request đang đợi để phát. Ở mỗi bài hát trong danh sách có 2 nút: 1 để Play(phát luôn bài này, không phải đợi đến lượt), 1 nút để Remove(xóa bài này nếu không muốn nó nằm trong danh sách request nữa).

Cơ bản là cái body chỉ có vài dòng code như nè:

 

Hướng dẫn làm web nhạc bằng code html  - Vẽ giao diện

 

  1. Xử lý request

Đây được xem như phần linh hồn của web, phần này nhiệm vụ chính là xử lý tìm kiếm bài hát, lấy kết quả, hiển thị, xử lý các action của người dùng add/remove/play bài hát. Trước hết mình đi vào phần xử lý tìm kiếm trước nha.

Để có thể sử dụng Youtuve API để tìm kiếm, bạn cần có 1 API_KEY, để có được key bạn vào develop của Youtube đăng ký nhé https://developers.google.com/youtube/.

Khi đã có key rồi bạn tiến hành xử lý search video, ở đây mình dùng AJAX để get data:

 

 

Ở đây chúng tôi chỉ sử dụng các tham số cơ bản thôi: maxResult – giới hạn kết quả tìm kiếm(để tránh request search quá lâu), type – xác định loại video cần tìm kiếm. Và còn khá nhiều tham số nữa, bạn có thể tham khảo tại đây.

Và kết quả API trả về như sau với từ khóa “Người hãy quên em đi”:

Có khá nhiều key-value phải không nào, nhưng mình chỉ quan tâm đến các key-value cần thiết cho bài toán của mình thôi, đó là: videoId, title, thumbnails, channelTitle.

Việc còn lại khá đơn giản là parse json và hiển thị kết quả thôi nên mình không show ở đây. Nhưng có 1 điều đáng nói ở đây là trong data trả về không có 1 số thông tin như: độ dài, số lượt view của video. Mình cũng không hiểu tại sao API lại không trả về những thông tin này. Và để lấy được các thông tin này bạn cần tốn thêm 1 request nữa. Ở đây mình chỉ request để lấy độ dài video thôi, còn lượt view thì các bạn có thể tham khảo thêm nha.

Với request này cũng cũng dùng AJAX thôi, như này nè:

Trong kết quả trả về cũng có rất nhiều key-value, bạn chỉ cần quan tâm đến key-value là:

Tuy nhiên API lại không trả ra cho bạn trực tiếp độ dài của video theo dạng milliseconds hoặc string biểu diễn độ dài như “04:56” mà đây là chuẩn Date and time format – ISO 8601. Và bạn cần thêm 1 bước nữa để convert từ dạng này sang chuỗi “04:56” mong muốn.

Đây là đoạn convert duration:

OK, đến bước này bạn đã có được các thông tin cần thiết để dùng cho bài toán rồi đó.

  1. Xử lý play và hàng đợi request

Việc xử lý Play khá đơn giản, đó là bạn chỉ việc dùng đối tượng Player của API đã cung cấp, tham số truyền vào chỉ là videoId mà bạn lấy được ở trên.

 

 

Việc thứ 2 là xử lý nhiều request từ client, ở đây mình cần lưu lại các request này và xử lý các request theo cơ chế Hàng đợi First In First Out(vào trước ra trước). Vì muốn nhanh gọn nên mình không dùng cơ sở dữ liệu gì ở chỗ này cả, mà chỉ dùng localStorage của JavaScript để lưu thôi. Các bạn có thể extend function này với các hệ quản trị cơ sở dữ liệu như MySQL. Như đã nói lúc đầu, mình chỉ code chay JavaScript nên việc mình cũng không sử dụng Queue có sẵn mà sẽ tự tạo 1 Queue bằng mảng để dùng. Hôm trước mình cũng có viết 1 bài cách tạo cách tạo 1 Hàng đợi bằng mảng tại đây, các bạn vào xem nhé.

Ngoài việc thực hiện các request tuần tự, thì bạn cần xử lý thêm các action khác như: play/remove 1 bài hát trực tiếp mà không phải đợi. Các thao tác này cũng đơn giản là theo tác trên mảng, nên mình nghĩ m.n đều thực hiện dễ dàng ấy mà. Nếu không được, bạn hãy view source code của mình để làm theo nha.

Như vậy đến đây đơn vị thiết kế website uy tín đã hướng dẫn các bạn tạo được 1 web nghe nhạc đơn giản rồi đấy.

Trên đây là hướng dẫn làm web nhạc bằng code html, mọi ý kiến đóng góp xin gửi về thiết kế web 180 qua số điện thoại:0363280183 hoặc email:dtn.cntt@gmail.com.