抽个空浏览了一下众大侠的博客,发觉我自从用上Typecho后,对Wordpress的事关注度明显下降了(对不住哈),这不昨天浏览到一同类(同Typecho博客)的音乐播放器分享,看了看觉得可以放在自己的网站上显摆一下,那就动手吧!先下载好相关的CSS和JS文件,并上传到主题目录下,顺便对这个播放器简单介绍一下:这款音乐播放器的插件版,插件版有一个好处就是带后台,有按钮控制;而无插件就是通过直接改代码的形式了,比如:自动播放、换个歌啥的,但身为强迫症严重的我,绝对不允许插件太多的存在(受之前WordPress影响);
废话不多说,代码我放到资源文件里了(补上一个文件下载链接:https://pan.baidu.com/s/1skX9vCp 密码: gfue ),下面就跟着我一二三吧:
uu126_yinyue.png
1、打开主题目录下的head.php(路径相信大家能明白在哪里吧),插入以下代码:
这个自己看着改哈,改好后上传覆盖。
2、打开主题目录下的index.php,插入以下代码:
Title - Artist
0:00
var playlist = [
{title:"为你我受冷风吹",artist:"胡彦斌",mp3:"http://p2.music.126.net/SAtMXu_B_yhBwdh4KNIk4A==/5861496487788143.mp3",cover:"http://p3.music.126.net/cUe-0OA62K0EyXWoRMY4oA==/5902178418015672.jpg?param=106x106",},
{title:"遇见",artist:"杨搏",mp3:"http://p2.music.126.net/wKgEGTTHZIIXLg9UCHxvoA==/6049512976551370.mp3",cover:"http://p3.music.126.net/V04YNVpmNU6L3vDvzpzlbg==/3284241233642899.jpg?param=106x106",},
{title:"我们好像在哪见过",artist:"小柯",mp3:"http://p2.music.126.net/kTFnbtNodo4nL7WLX0tlSg==/5848302348252295.mp3",cover:"http://p4.music.126.net/83MGbAjAkLx_9Pk9gpcqsA==/1903254627802817.jpg?param=106x106",},
{title:"你要的不是我",artist:"徐小薇",mp3:"http://p2.music.126.net/rRbpD6-K12YmlReMe76QMQ==/8931332952433800.mp3",cover:"http://p3.music.126.net/OcuKe1XXheDa2y_zDlVIfA==/3294136838291281.jpg?param=106x106",},
{title:"想把我唱给你听",artist:"老狼",mp3:"http://p2.music.126.net/qYHze3h07IqDdV6YSy3uQA==/5992338371393361.mp3",cover:"http://p4.music.126.net/-7gL1G_kVsgIb7eAFyQdNA==/3262251001467551.jpg?param=106x106",},
{title:"丁香花",artist:"周玥",mp3:"http://p2.music.126.net/RNenjbsCEeeI2bnGB4EcPg==/2903810210384172.mp3",cover:"http://p4.music.126.net/O0MbXlINzZabpOEjZA-otA==/2929098977807667.jpg?param=106x106",},
{title:"喜欢两个人",artist:"彭佳慧",mp3:"http://p2.music.126.net/E5X5r0w_MgUilKBDpz9Log==/7936274930834753.mp3",cover:"http://p3.music.126.net/GpsgjHB_9XgtrBVXt8XX4w==/93458488373078.jpg?param=106x106",},
{title:"约定",artist:"光良",mp3:"http://p2.music.126.net/K2GgsEh7WdPIU8QisLLH0A==/3213872487990028.mp3",cover:"http://p4.music.126.net/Zxzq0d-ZD2W0c43yczQMgw==/65970697678836.jpg?param=106x106",},
{title:"if you英文版",artist:"夏娜hana",mp3:"http://p2.music.126.net/muO1bPmOIHQbaVP1qkxgEA==/3265549585968005.mp3",cover:"http://p4.music.126.net/N7ZkbcECBAj_7BHARqotHQ==/17784600579616648.jpg?param=106x106",},
{title:"男孩别哭",artist:"海龟先生",mp3:"http://p2.music.126.net/JNMhi2SCp9ief3mHmKqMjA==/3294136836885992.mp3",cover:"http://p4.music.126.net/tOhom1sERa_KgoA78Pqa1Q==/2423323627633522.jpg?param=106x106",},
{title:"红山果",artist:"安与骑兵",mp3:"http://p2.music.126.net/85KftQ_p5h_7ONBpsmVBpQ==/5710863394757725.mp3",cover:"http://p3.music.126.net/tBHbunQa_Ou4UK8jAversw==/71468255819741.jpg?param=106x106",},
{title:"红山果",artist:"安与骑兵",mp3:"http://p2.music.126.net/zbTjTGWDnFkZ08BFMyczKA==/5907675976114699.mp3",cover:"http://p4.music.126.net/ufbEesesjI7ctcHej_RI1w==/5741649720316074.jpg?param=106x106",},
{title:"解药",artist:"孙紫晴",mp3:"http://p2.music.126.net/b9VwYHFBBV2b6dhaue9hbg==/5688873162187786.mp3",cover:"http://p4.music.126.net/jmWuDwUSs409gvNDKCZCnw==/708085488322985.jpg?param=106x106",},
{title:"你的配角",artist:"回音哥",mp3:"http://p2.music.126.net/-6g1zxGU2XV4-pnEq2BlXA==/2896113628262462.mp3",cover:"http://p4.music.126.net/onh_PZ5xFarv0wAyU9mWIQ==/2926899953762176.jpg?param=106x106",},
{title:"爱呀",artist:"金玟岐",mp3:"http://p2.music.126.net/H3Sby1SGWifhp7qMW-dW7Q==/3413983621387083.mp3",cover:"http://p3.music.126.net/54wdQi_3rpjreY2oo2jb7w==/5998935441219557.jpg?param=106x106",},
{title:"安静|尤克里里弹唱",artist:"柠檬树组合",mp3:"http://p2.music.126.net/eEDbv4uczl2UsxmSgqMN4g==/3446968964382378.mp3",cover:"http://p4.music.126.net/iCNRpAF-tSld5XmvAt0S8g==/18227703765715979.jpg?param=106x106",},
{title:"离开的理由",artist:"牛奶咖啡",mp3:"http://p2.music.126.net/9sh8IrM8O2_14Cs8p3AcEw==/7976956861040239.mp3",cover:"http://p4.music.126.net/LQ2iUKlZwqGMysGkeCR4ww==/27487790697969.jpg?param=106x106",},
{title:"听你说",artist:"冯提莫",mp3:"http://p2.music.126.net/coSRt9v9SMuIkwezzD4QqQ==/3417282155936067.mp3",cover:"http://p3.music.126.net/25hlFe80WxDyQmu41JMh4Q==/109951162812868479.jpg?param=106x106",},
{title:"孤单北半球",artist:"欧得洋",mp3:"http://p2.music.126.net/48AmHcM9j9xZ0aclaHx77Q==/1252343744079893.mp3",cover:"http://p3.music.126.net/OTa-ZJkkiV208--vw-hacg==/124244813939534.jpg?param=106x106",},
{title:"原谅",artist:"张玉华",mp3:"http://p2.music.126.net/BNTFaNAVmryQkoyuMTvIWw==/3442570907099641.mp3",cover:"http://p4.music.126.net/KdaoMSlxYxR7Z2fIeZrFXQ==/114349209304385.jpg?param=106x106",},
{title:"七月上",artist:"Jam",mp3:"http://p2.music.126.net/K1SFXCvWf8BO9VEpSvx2ew==/7967061257205150.mp3",cover:"http://p3.music.126.net/9kZl6NRj3HxmQQ8DqTjZ4Q==/17729624997966923.jpg?param=106x106",},
{title:"想你零点零一分-徐薇",artist:"徐薇",mp3:"http://p2.music.126.net/_qn7SA6RJmPw05gzdppMOw==/3394192431674152.mp3",cover:"http://p4.music.126.net/nVoSV6uA0MURcTfgvnQ_zw==/18024294114341058.jpg?param=106x106",},
{title:"对不起我爱你",artist:"蔡淳佳",mp3:"http://p2.music.126.net/gMUJGPHoLzPskorPU6rqtw==/1167681348705703.mp3",cover:"http://p3.music.126.net/KwmbwhwG3-bAoI-KAI0vmg==/39582418613244.jpg?param=106x106",},
{title:"一生有你",artist:"周玥",mp3:"http://p2.music.126.net/jt97yCFUuh8_w2ALRSk97g==/7698780419305871.mp3",cover:"http://p4.music.126.net/O0MbXlINzZabpOEjZA-otA==/2929098977807667.jpg?param=106x106",},
{title:"撕夜",artist:"阿杜",mp3:"http://p2.music.126.net/U2m6b6xYhW5HszmGIIksEg==/7994549047223488.mp3",cover:"http://p4.music.126.net/C71BhIuR2l6pg7Dhz2MFcg==/76965813944980.jpg?param=106x106",},
{title:"如果你也听说",artist:"张惠妹",mp3:"http://p2.music.126.net/VJ8F5FMsBlxy2frn71Grxw==/6622358534172426.mp3",cover:"http://p3.music.126.net/X4r7ThHc-uAcxEXvZ4G0mA==/6661940952772237.jpg?param=106x106",},
{title:"第一次",artist:"光良",mp3:"http://p2.music.126.net/vNt2dWuyzm_f0GMEAEVCsA==/7930777372743720.mp3",cover:"http://p3.music.126.net/IFjMWxtDuOnjdgmkUb-TjQ==/39582418611956.jpg?param=106x106",},
{title:"你妈逼你结婚了吗",artist:"小缘",mp3:"http://p2.music.126.net/Kz05PKFbp6nB3NFmLLELuw==/3235862721256261.mp3",cover:"http://p4.music.126.net/2XLMVZhzVZCOunaRCOQ7Bg==/3274345629219531.jpg?param=106x106",},
{title:"写给我第一个喜欢的女孩的歌",artist:"西瓜Kune",mp3:"http://p2.music.126.net/tFxdXMfc-9ySURiQ-pWY7g==/2946691230466209.mp3",cover:"http://p3.music.126.net/hdrjFYPZXd2HgL-3OMlDIw==/18290375928279193.jpg?param=106x106",},
{title:"黑猫",artist:"泠鸢yousa",mp3:"http://p2.music.126.net/6t1QeZCpUzHPIbcnow9zHw==/7948369557601218.mp3",cover:"http://p3.music.126.net/GQ9JkLt6QBaAoLbJ8UOoCQ==/3406287023862462.jpg?param=106x106",},
{title:"吵架歌",artist:"叶洛洛",mp3:"http://p2.music.126.net/Bw4JNsNpqmyYojrGbfmfLA==/1385384666705656.mp3",cover:"http://p4.music.126.net/ADwGmh2dm5rlnQiOfO_eQg==/17810988858699279.jpg?param=106x106",},
{title:"岁月神偷",artist:"金玟岐",mp3:"http://p2.music.126.net/0443RBA9VVlBGMDTHn2mTA==/1420569036314644.mp3",cover:"http://p3.music.126.net/54wdQi_3rpjreY2oo2jb7w==/5998935441219557.jpg?param=106x106",},
{title:"大笨钟",artist:"刘瑞琦",mp3:"http://p2.music.126.net/iU_6fBQIDUVjJDx0k2stNA==/7974757837784826.mp3",cover:"http://p3.music.126.net/q-xabCVVQ2A0ZEdo1TNKOg==/3283141722234741.jpg?param=106x106",},
{title:"夏天的风",artist:"刘瑞琦",mp3:"http://p2.music.126.net/mJmlquq1eJhL1t3VwAZPUw==/3156697883395736.mp3",cover:"http://p3.music.126.net/_RDkx-1ALrisLhdpTAg5_Q==/2457408488136735.jpg?param=106x106",},
{title:"黑色毛衣",artist:"刘瑞琦",mp3:"http://p2.music.126.net/Iq6fiMwhbP_bu668kx_bVw==/7742760882949101.mp3",cover:"http://p3.music.126.net/obZy1mbYWFJtbyr26Q6Smg==/7749357952693832.jpg?param=106x106",},
{title:"可爱女人",artist:"刘瑞琦",mp3:"http://p2.music.126.net/yE_njD0DNqh0DSaP3zyJxg==/7715273092246122.mp3",cover:"http://p3.music.126.net/obZy1mbYWFJtbyr26Q6Smg==/7749357952693832.jpg?param=106x106",},
{title:"晴天",artist:"刘瑞琦",mp3:"http://p2.music.126.net/oxP2XaJFDscDuGhGnO7beA==/7768049650386454.mp3",cover:"http://p4.music.126.net/obZy1mbYWFJtbyr26Q6Smg==/7749357952693832.jpg?param=106x106",},
{title:"房间",artist:"刘瑞琦",mp3:"http://p2.music.126.net/XWiUfSO2te8Ud80DJW-xhA==/3253454906690339.mp3",cover:"http://p4.music.126.net/hOr_kcXuEDIsQ0JK1HOewQ==/5698768766875669.jpg?param=106x106",},
{title:"发如雪",artist:"徐薇",mp3:"http://p2.music.126.net/3GID47cBAp7KXP0xic4ulA==/7960464186523477.mp3",cover:"http://p3.music.126.net/lFj9dsCs9ucmrZlUQ_NcKQ==/3273246117440964.jpg?param=106x106",},
{title:"你还要我怎样-徐薇",artist:"徐薇",mp3:"http://p2.music.126.net/BX3Yve3MgZRv_N5rXMkg9g==/3420580746165870.mp3",cover:"http://p3.music.126.net/nVoSV6uA0MURcTfgvnQ_zw==/18024294114341058.jpg?param=106x106",},
{title:"夜空中最亮的星",artist:"徐小薇",mp3:"http://p2.music.126.net/15SO8H57d36vDZmqG_MbLw==/5853799906501854.mp3",cover:"http://p4.music.126.net/D22IKBn-eUq-EebVSbAuJA==/5934064255276851.jpg?param=106x106",},
{title:"那么骄傲",artist:"周玥",mp3:"http://p2.music.126.net/zBvbSjCuQJHWme9QjEtUzg==/2917004349902345.mp3",cover:"http://p4.music.126.net/O0MbXlINzZabpOEjZA-otA==/2929098977807667.jpg?param=106x106",},
{title:"我以为",artist:"徐薇",mp3:"http://p2.music.126.net/vFABwceFwRDthO4BlEai2w==/5773535557680612.mp3",cover:"http://p3.music.126.net/d5yZbhgszplRTcnNCROW-g==/3382097768286533.jpg?param=106x106",},
];
var isRotate = true;
var controls = true;
function bgChange(){
var lis= $('.lib');