/* */

Hi, I am

Ngô Tôn

I am a programmer.

Home / Programming / Web Development / CSS / Hướng dẫn làm Playlist bằng HTML, CSS, Jquery

Hướng dẫn làm Playlist bằng HTML, CSS, Jquery

Hôm nay, Ngô Tôn .IT xin hướng dẫn các bạn làm 1 trang web playlist nhạc bằng HTML, CSSJquery.
Các bạn có thể xem demo tại đây: http://ngoton.it/demo/playlist

playlist

Cấu trúc website như sau:
– css
– data
– images
– js
– index.html

Đầu tiên, với file index.html

 

Mình giải thích chút nhé.
Ta thêm 1 div với class name là “player” gồm các thành phần:
– pl: Hiển thị playlist
– title: Hiển thị tên bài hát. Mình cho thêm thẻ marquee nữa cho nó chạy chạy 😀
– artist: Nghệ sĩ
– cover: Hiển thị đĩa nhạc
– controls: Chứa các nút điều khiển
– volume: Âm lượng
– tracker: Mình tạm dịch là cây thời gian của bài hát
Và 1 list danh sách bài hát trong class “playlist”, mình để trạng thái ẩn

Bây giờ ta sẽ định nghĩa style cho các thành phần trên.
/css/styles.css

1 số hình ảnh các bạn hãy vào đây để tải về nhé, nhớ bỏ vào thư mục imageshttp://ngoton.it/demo/playlist/images/

Giờ tới phần Jquery, các bạn download 2 file là jquery-1.7.2.min.js và jquery-ui-1.8.21.custom.min.js rồi copy vào folder “js”.
Bây giờ các bạn tạo file main.js với nội dung sau:

Cuối cùng các bạn hãy cho bài hát cùng cover vào thư mục data và thưởng thức thôi :).
Các bạn chú ý ở file index, mình có để các list bài hát với các attributes là audiourlcover, các bạn nhớ đặt tên cho đúng nhé.
VD: audiourl=”01.mp3″ cover=”cover1.png”
tương ứng trong folder data sẽ có: 01.mp3 , cover1.png

Chúc các bạn thành công!

Hôm nay, Ngô Tôn .IT xin hướng dẫn các bạn làm 1 trang web playlist nhạc bằng HTML, CSS và Jquery. Các bạn có thể xem demo tại đây: http://ngoton.it/demo/playlist Cấu trúc website như sau: - css - data - images - js - index.html Đầu tiên, với file index.html [crayon-5befbf8ff2b0a303216177/]   Mình giải thích chút nhé. Ta thêm 1 div với class name là "player" gồm các thành phần: - pl: Hiển thị playlist - title: Hiển thị tên bài hát. Mình cho thêm thẻ marquee nữa cho nó chạy chạy :D - artist: Nghệ sĩ - cover: Hiển thị…

User Rating: 5 ( 1 votes)

About ngoton

Ngô Tôn is a programmer. He is crazy about new gadgets and up to date with latest technology trends. Use comments to notify any issues you are facing.

Check Also

live-stream-4

Thống kê tương tác thực trong Live Stream Facebook

Chào các bạn, lâu rồi Ngô Tôn không ra bài viết mới thì hôm nay …

Leave a Reply

Your email address will not be published. Required fields are marked *