{% assign aplayer = site.data.meng.music_player %}
<style>
    @media screen and (max-width: 600px){
        .k-music-card{
            transform:translateX(-250px)
        }
    }
    .k-music-card{
        width: 270px;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        position: fixed;
        bottom: 155px;
        z-index: 999;
        transition: transform .5s ease;
    }
.aplayer{
    float: left;
    width: 250px;
    margin: 0 auto;
    position: relative;
    background: rgb(255,255,255);
    box-sizing: border-box;
    box-shadow: none;
}
.k-music-btn{
    text-align: center;
    line-height: 66px;
    color: #fff;
    width: 20px;
    height: 66px;
    background: {{aplayer.button_color}} none repeat scroll 0% 0%;
    position: relative;
    right: 0px;
    bottom: 0px;
    box-sizing: border-box;
    border-left: none;
    cursor: pointer;
    display: box-shadow:;
    float: right;
}
</style>
<div class="k-music-card">
<div id="player1" class="aplayer"></div>
<div class="k-music-btn">></div>
</div>

<script src="https://cdn.bootcss.com/aplayer/1.6.0/APlayer.min.js"></script>
<script>
    var ap = new APlayer({
    element: document.getElementById('player1'),                   
    narrow: false,                                                    
    autoplay: true,                                                    
    showlrc: 0,                                                      
    mutex: true,                                                       
    theme: '#e6d0b2',                                                
    mode: 'random',                                                    
    preload: 'metadata',                                            
    listmaxheight: '513px',                                            
    music:[
    {% for music in aplayer.music  %}
        {                                                           
            title: '{{music.title}}',                                         
            author: '{{music.author}}',                         
            url: '{{music.url}}', 
            pic: '{{music.pic}}',  
            lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'                   
        },
    {% endfor %}
    ]
});

$(".aplayer-list").addClass("aplayer-list-hide");
if($(window).width()<=600){
    var flag = true;
}else{
    var flag = false;
}

$('.k-music-btn').click(function(){
    if (flag == false){
        $('.k-music-card').css('transform','translateX(-250px)');
        flag = true;
    }else if(flag == true){
        $('.k-music-card').css('transform','translateX(0px)');
        flag = false;
    }
    
    if (!$(".aplayer-list").hasClass('aplayer-list-hide')) {
        $(".aplayer-list").addClass('aplayer-list-hide');
    }
});
    document.addEventListener("visibilitychange", function() {
	    if(document.visibilityState == "hidden" ){
           ap.pause();
        }
        if(document.visibilityState == "visible"){
            ap.play();
        }
    }, false);
</script>