Codedayroi.Net
  • MẠNG XÃ HỘI
  • © Copyright 2018 Code đây rồi

    Tạo tiện ích nghe nhạc cho trang web

    Thể loại Tutorial
    Xin chào tất cả các bạn hôm nay mình sẽ hướng dẫn các bạn tích hợp tiện ích nghe nhạc vào trang web của các bạn

    Hướng dẫn cách làm:

    Tìm thẻ </body> và dán toàn bộ đoạn code bên dưới lên trên thẻ vừa tìm
    <!-- star music-box -->
    <style>
    .music-box{position:fixed;width:300px;height:160px;z-index:120;bottom:30px;left:30px}
    @media (max-width: 991px) {
    .music-box{width:250px;height:120px;left:auto;left:30px}
    }
    .music-box .music-holder{width:100%;height:100%;border:2px solid #eee;position:absolute;left:0;top:-30px;visibility:hidden;opacity:0;-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
    .music-box .music-holder iframe{width:100%;height:100%}
    .music-box button{background:rgba(0,0,0,0.1);width:40px;height:40px;line-height:37px;font-size:18px;font-size:1rem;color:#5e9a8e;border:1px solid #e6e6e6;outline:0;padding:0;margin:0;position:absolute;left:0;bottom:0;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;border-radius:50%}
    @media (max-width: 991px) {
    .music-box button{left:auto;left:0}
    }
    .music-box .toggle-music-box{top:-50px;visibility:visible;opacity:1}
    </style>
            <div class='music-box'>
                <button class='music-box-toggle-btn'>
                  <a title='Play music'><i class='fa fa-music'/></a>
                </button>
    
                <div class='music-holder'>
                    <iframe src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/342591097&amp;amp;auto_play=true&amp;amp;hide_related=false&amp;amp;show_comments=true&amp;amp;show_user=true&amp;amp;show_reposts=false&amp;amp;visual=true'/>
                </div>
            </div>
    <script type='text/javascript'>
    //<![CDATA[
    if($(".music-box").length) {var musicBtn = $(".music-box-toggle-btn"),musicBox = $(".music-holder");musicBtn.on("click", function() {musicBox.toggleClass("toggle-music-box");return false;})}
    //]]>
    </script>
    <!-- end music box -->
    
    Chú ý: tracks/342591097 bạn thay thành link nhạc và hãy lưu ý rằng chỉ lấy đoạn tracks/.../
    Chúc bạn thành công!
    • Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
    • Mọi chi tiết xin liên hệ:
    • Email: starbinhblog@gmail.com
    • Facebook: Fb.com/100010597577095

    Trần Thanh Bình

    Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!

    Loading...

    Biểu mẫu liên hệ