{% 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=“cdn.bootcss.com/aplayer/1.6.0/APlayer.min.js”>> <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>