Cách tạo tiện ích nghe nhạc cho trang website của 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:

>

<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!