{% assign cplayer = site.data.meng.music_player %} <style> k-cplayer{

position: fixed;
bottom: 130px;
-webkit-box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
transition: transform .5s ease;

}

@media screen and (max-width: 600px){
    #k-cplayer{
        transform:translateX(-300px)
    }
}

</style> <script src=“cdn.bootcss.com/cplayer/3.1.3/cplayer.js”>> <div id=“k-cplayer”> <div class=“k-music-btn”>></div> </div> <script>

jQuery(document).ready(function ($) {
    var player = new cplayer({
        element: document.getElementById('k-cplayer'),
        playlist: [
            {% for music in cplayer.music  %}
            {
                src: '{{music.url}}',
                poster: '{{music.pic}}',
                name: '{{music.title}}',
                artist: '{{music.author}}',
            },
            {% endfor %}
         ]
    });

if($(window).width()<=600){

var flag = true;

}else{

var flag = false;

}

$('.k-music-btn').click(function(){

if (flag == false){
    $('#k-cplayer').css('transform','translateX(-300px)');
    flag = true;
}else if(flag == true){
    $('#k-cplayer').css('transform','translateX(0px)');
    flag = false;
}

});

document.addEventListener("visibilitychange", function() {
        if(document.visibilityState == "hidden" ){
       player.pause();
    }
    if(document.visibilityState == "visible"){
        if($(window).width()>600){
            player.play();
        }
    }
}, false);
})

</script>