迷你音乐播放器及实现全站pjax无刷新加载

Mr.Bai 1,653 浏览 4

演示截图:

使用教程,下载播放器文件,直接上传压缩包至你的网站根目录,然后解压到根目录。

然后在你的网站程序模板文件或者html中的</body>前面加上下面的代码:

<?php require '/MINET/music.php'; music::Minetxmusic('1997318085','open','www.baidu.com');?>

第一个参数为你网易云音乐的歌单ID,第二个open是开启ssl
如果你的网站没有ssl那么请填写cloesd

音乐播放器下载链接:https://pan.baidu.com/s/1pM8opAj 密码:ma6y
一行代码即可搞定播放器,不过要实现点击其他页面音乐不暂停 的话可以使用一下方法:

整合pjax的准备工作;

    检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入

1.新浪CDN提速:

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

 1.7.0版本以上的才有pushState的封装。

开始整合Pjax;

1.下载pjax.js :链接: https://pan.baidu.com/s/1miZi2nQ 密码: v1im

2.在你喜欢的位置(最好body代码结束前)引入pjax.js;

<script type="text/javascript" src="/assets/js/pjax.js"></script>

使用pjax;

    编辑模版footer.php在</body>标记结束前插入:

<script> $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000}); </script>

写好代码后,将容器contentleft付给一个ID,比如在body内的一个div,如:

<body> <div id="contentleft"> 网站内容部分... </div> </body>

搞定

 

发表评论 取消回复
表情 图片 链接 代码

  1. Smurfs
    Smurfs Lv 1

    请问播放器那里怎么添加代码?哈哈我小白,不是很懂

    • Mr.Bai
      Mr.Bai 站长

      @Smurfs按照文章步骤即可

      • grgrgr
        grgrgr Lv 1

        @Mr.Bai可以用在hexo吗 ,最后那段直接复制粘贴还是加播放器id

      • Mr.Bai
        Mr.Bai 站长

        @grgrgr如果直接复制粘贴可能会使用不了,根据原代码进行移植

分享
请选择语言