分享一个侧边栏音乐播放器插件，支持博客
- #食用方法
将下面这段Html引入你的网页文件中即可
<!-- music -->
<!--播放器 -->
<link rel="stylesheet" href="https://cdn.20mo.cn/music/css/player.css">
<div id="QPlayer">
<div id="pContent">
<div id="player"> <span class="cover"></span>
<div class="ctrl">
<div class="musicTag marquee"> <strong>Title</strong> <span> - </span> <span class="artist">Artist</span> </div>
<div class="progress">
<div class="timer left">0:00</div>
<div class="contr">
<div class="rewind icon"></div>
<div class="playback icon"></div>
<div class="fastforward icon"></div>
</div>
<div class="right">
<div class="liebiao icon"></div>
</div>
</div>
</div>
</div>
<div class="ssBtn">
<div class="adf"></div>
</div>
</div>
<ol id="playlist">
</ol>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.20mo.cn/music/js/jquery.marquee.min.js"></script>
<script>
var playlist = [
{title:"送给未来的你",artist:"阳山伟伟",mp3:"http://y2-p-p.qq190.net/UserSongs/2020/01/3545ba5c5b954243ae8a3e6b59f4e389_mp3.m4a",cover:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2085557345,1596804370&fm=179&app=42&f=JPEG?w=150&h=150",},
{title:"也许夜最适合哭",artist:"未知",mp3:"http://y2-p-p.qq190.net/UserSongs/2018/08/9db2ee0d2362462ea1736626a0ee7494_5960731.m4a",cover:"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3844781748,3237739597&fm=58&bpow=960&bpoh=634",},
{title:"樱花树下的约定（咚鼓版）",artist:"未知",mp3:"http://y2-p-p.qq190.net/UserSongs/2017/12/52/ed4552f2e0b24d93bc35c0338d2470e4_91358.m4a",cover:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2851431503,2395572788&fm=58&bpow=500&bpoh=500",},
];
var isRotate = 1;
var autoplay = 0;
</script>
<script src="https://cdn.20mo.cn/music/js/player.js"></script>
<script>
function bgChange(){
var lis= $('.lib');
for(var i=0; i<lis.length; i+=2)
lis[i].style.background = 'rgba(246, 246, 246, 0.5)';
}
window.onload = bgChange;
</script>
<!-- / music -->- #自动播放
var autoplay = 0;把参数改为1
- #建议
代码段建议放在页面底部
如果需要可以将css,js下载到本地服务器引用
- #下载链接