侧边栏音乐播放器插件

发布于 / 技巧杂烩 / 0 条评论

侧边栏音乐播放器

分享一个侧边栏音乐播放器插件,支持博客

  • #食用方法

将下面这段PHP引入你的网页文件中即可

<!-- 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下载到本地服务器引用

  • #下载链接

music.zip

Not Comment Found