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

Tài liệu
Tạo tiện ích nghe nhạc cho trang web
Chuyên mục
Đăng vào
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!

Hiện có bình luận

Thông báo
Cảm ơn bạn đã quan tâm đến thông báo này.
Xong