Đăng nhập Register Login with Facebook

Hướng dẫn code tạo playlist nhạc sử dụng HTML5 & CSS3

Thảo luận trong 'HTML 5 và CSS3' bắt đầu bởi truongkienthuc, 18/1/14.

Loading...
  1. truongkienthuc

    truongkienthuc Administrator

    [​IMG]
    ​
    Có nhiều bạn đóng góp ý kiến trong bài Hướng dẫn tạo Playlist Audio bằng HTML5 & CSS3 cách nào tạo ra playlist. Do hạn chế của bài hướng dẫn trên là chỉ thao tác trên một tập tin. Hôm nay, Y2Graphic sẽ giới thiệu một bài hướng dẫn khác để tạo playlist nhạc. Mời các bạn theo dõi bài viết dưới đây.

    Trước khi vào bài hướng dẫn này, các bạn hãy xem qua bố trí cây thư mục. Chú ý đến những file màu đỏ.
    [​IMG]​
    Trong thư mục player
    • Thư mục mix: Là nơi chứa file nhạc, hình ảnh của bài hát.
    • Thư mục js: Chú ý đến tập tin myplaylist.js, là nơi thêm các bài hát.
    Trong thư mục plugin
    • Thư mục images: Là nơi chứa cái file ảnh cần cho playlist như các nút play, stop v.v…
    • Tập tin jquery.jplayer.js và ttw-music-player.js: Hai tập tin này khai báo các thuộc tính cần cho một playlist. Nếu bạn code giỏi, bạn có thể chỉnh sửa, thêm bớt các thuộc tính khác.
    CẤU TRÚC HTML
    Tất cả bài hát trong playlist đều load từ tập tin myplaylist.js, nên chúng ta thêm các script trong thẻ <head>
    HTML:
    <link rel="stylesheet" type="text/css" href="/../plugin/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/demo.css">
<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/../plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="/../plugin/ttw-music-player.js"></script>
<script type="text/javascript" src="/js/myplaylist.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        var description = '';

        $('body').ttwMusicPlayer(myPlaylist, {
            tracksToShow:5,
            jPlayer:{
                swfPath:'../plugin/jquery-jplayer'
            }
        });
    });
</script>
    Mặc định là 5 bài hát sẽ được load trước tiên. Muốn thay đổi số bài hát được load, chỉnh dòng tracksToShow

    CSS3
    Bài hướng dẫn này, mình không hướng dẫn phần CSS3. Các bạn có thể tham khảo trong tập tin style.css trong thư mục plugin.

    CÁCH THÊM BÀI HÁT
    Như đã nói ở trên, nếu muốn thêm bài hát, hãy mở tập tin myplaylist.js và theo cấu trúc sau:
    Mã:
    {
    mp3:'URL bài hát',
    title:'Tên bài hát',
    artist:'Người thể hiện',
    duration:'Độ dài bài hát',
    cover:'Hình đại diện - Kích thước là 125x125px'
},
    Bài hát và hình đại diện sẽ được lưu trong thư mục mix. Bạn có thể thay đổi thư mục khác nếu thích. Trong bài hướng dẫn này, Y2Graphic sử dụng link trực tiếp trên zing mp3 luôn.

    :banana:Demo và download source playlist nhạc: :banana:
    Nguồn: Y2Graphic & tin4u​
    ​
    Loading...

    Có thể bạn quan tâm

    truongkienthuc, 18/1/14
    #1
: tạo playlist nhạc, css3, html5, code tạo playlist mp3

Chia sẻ trang này