爱站程序员基地一、播放样式
二、引入CSS+JS
css,js下载地址：GitHub下载地址
2.1 新建模块musicPlayer.html
<div id=\"player\" th:fragment=\"musicPlayer\"><script>var zp = new zplayer({element: document.getElementById(\"player\"),autoPlay: 0,/*是否开启自动播放,默认false*/lrcStart: 1,/*是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）*/showLrc: 0,/*开启歌词功能后是否展示歌词内容 ，默认false*/fixed:1, /*是否固定在底部，默认false*/listFolded:1, /*列表是否折叠，默认false*/listMaxHeight:300, /*列表最大高度，默认240*/musics: [{title: \"讲真的\",author: \"曾惜\",url: \"http://music.163.com/song/media/outer/url?id=30987293.mp3\",pic: \"http://p1.music.126.net/cd9tDyVMq7zzYFbkr0gZcw==/2885118513459477.jpg?param=300x300\",lrc:\"[by:却连一句我爱你都不能说出口]\\n[ti:讲真的]\\n[ar:曾惜]\\n[al:不要你为难]\\n[by:冰城离殇]\\n[00:00] 作曲 : 何诗蒙\\n[00:01] 作词 : 黄然\\n[00:18]今夜特别漫长\\n[00:21]有个号码一直被存放\\n[00:25]源自某种倔强\\n[00:30]不舍删去又不敢想\\n[00:33]明明对你念念不忘\\n[00:37]思前想后愈发紧张\\n[00:41]无法深藏\\n[00:43]爱没爱过想听你讲\\n[00:48]讲真的\\n[00:51]会不会是我 被鬼迷心窍了\\n[00:54]敷衍了太多 我怎么不难过\\n[00:58]要你亲口说 别只剩沉默\\n[01:03]或许你早就回答了我\\n[01:06]讲真的\\n[01:08]想得不可得 是最难割舍的\\n[01:11]各自好好过 也好过一直拖\\n[01:15]自作多情了 好吧我认了\\n[01:19]至少能换来释怀洒脱\\n[01:23]没丢失掉自我\\n[01:42]今夜特别漫长\\n[01:44]有个号码一直被存放\\n[01:49]源自某种倔强\\n[01:53]不舍删去又不敢想\\n[01:57]明明对你念念不忘\\n[02:01]思前想后愈发紧张\\n[02:05]无法深藏\\n[02:08]爱没爱过想听你讲\\n[02:13]讲真的\\n[02:15]会不会是我 被鬼迷心窍了\\n[02:19]敷衍了太多 我怎么不难过\\n[02:23]要你亲口说 别只剩沉默\\n[02:27]或许你早就回答了我\\n[02:30]讲真的\\n[02:32]想得不可得 是最难割舍的\\n[02:35]各自好好过 也好过一直拖\\n[02:40]自作多情了 好吧我认了\\n[02:44]至少能换来释怀洒脱\\n[02:47]没丢失掉自我\\n[03:04]讲真的\\n[03:05]会不会是我 被鬼迷心窍了\\n[03:09]敷衍了太多 我怎么不难过\\n[03:14]要你亲口说 别只剩沉默\\n[03:18]或许你早就回答了我\\n[03:21]讲真的\\n[03:22]想得不可得 是最难割舍的\\n[03:26]各自好好过 也好过一直拖\\n[03:30]自作多情了 好吧我认了\\n[03:35]至少能换来释怀洒脱\\n[03:38]没丢失掉自我\\n\"},{title: \"那年的春天下着雨\",author: \"刘心\",url: \"http://music.163.com/song/media/outer/url?id=131589.mp3\",pic: \"http://p1.music.126.net/D1Ov-XMAwUzsr16mQk95fA==/109951163256119128.jpg?param=300x300\",lrc: \"[00:00.00] 作曲 : 小峰峰[00:01.00] 作词 : 小峰峰[00:05.03]编曲：吕宏斌&塞米七[00:05.28]和声：小峰峰[00:05.45]混音：陈秋洁[00:05.63]制作人：小峰峰[00:05.85]唱片：麦袭时代[00:06.40]OP：百纳娱乐[00:06.93][00:07.96]小潘潘：[00:08.31]我们一起学猫叫[00:10.58]一起喵喵喵喵喵[00:12.60]每天都贪恋着你的好[02:42.40][02:42.85]我们一起学猫叫[02:44.84]一起喵喵喵喵喵[02:46.89]在你面前撒个娇[02:49.02]哎呦喵喵喵喵喵[02:51.14]我的心脏砰砰跳[02:53.32]迷恋上你的坏笑[02:55.75]你不说爱我我就喵喵喵[02:59.12][02:59.47]我们一起学猫叫[03:01.59]一起喵喵喵喵喵[03:03.66]我要穿你的外套[03:05.82]闻你身上的味道[03:07.88]想要变成你的猫[03:09.98]赖在你怀里睡着[03:12.37]每天都贪恋着你的好\"},{title: \"好几年\",author: \"刘心\",url: \"http://music.163.com/song/media/outer/url?id=571545156.mp3\",pic: \"http://p1.music.126.net/D1Ov-XMAwUzsr16mQk95fA==/109951163256119128.jpg?param=300x300\",lrc: \"[00:00.00] 作曲 : 小峰峰[00:01.00] 作词 : 小峰峰[00:05.03]编曲：吕宏斌&塞米七[00:05.28]和声：小峰峰[00:05.45]混音：陈秋洁[00:05.63]制作人：小峰峰[00:05.85]唱片：麦袭时代[00:06.40]OP：百纳娱乐[00:06.93][00:07.96]小潘潘：[00:08.31]我们一起学猫叫[00:10.58]一起喵喵喵喵喵[00:12.60]每天都贪恋着你的好[02:42.40][02:42.85]我们一起学猫叫[02:44.84]一起喵喵喵喵喵[02:46.89]在你面前撒个娇[02:49.02]哎呦喵喵喵喵喵[02:51.14]我的心脏砰砰跳[02:53.32]迷恋上你的坏笑[02:55.75]你不说爱我我就喵喵喵[02:59.12][02:59.47]我们一起学猫叫[03:01.59]一起喵喵喵喵喵[03:03.66]我要穿你的外套[03:05.82]闻你身上的味道[03:07.88]想要变成你的猫[03:09.98]赖在你怀里睡着[03:12.37]每天都贪恋着你的好\"},{title: \"游响云停\",author: \"刘心\",url: \"http://music.163.com/song/media/outer/url?id=27646783.mp3\",pic: \"http://p1.music.126.net/D1Ov-XMAwUzsr16mQk95fA==/109951163256119128.jpg?param=300x300\",lrc: \"[00:00.00] 作曲 : 小峰峰[00:01.00] 作词 : 小峰峰[00:05.03]编曲：吕宏斌&塞米七[00:05.28]和声：小峰峰[00:05.45]混音：陈秋洁[00:05.63]制作人：小峰峰[00:05.85]唱片：麦袭时代[00:06.40]OP：百纳娱乐[00:06.93][00:07.96]小潘潘：[00:08.31]我们一起学猫叫[00:10.58]一起喵喵喵喵喵[00:12.60]每天都贪恋着你的好[02:42.40][02:42.85]我们一起学猫叫[02:44.84]一起喵喵喵喵喵[02:46.89]在你面前撒个娇[02:49.02]哎呦喵喵喵喵喵[02:51.14]我的心脏砰砰跳[02:53.32]迷恋上你的坏笑[02:55.75]你不说爱我我就喵喵喵[02:59.12][02:59.47]我们一起学猫叫[03:01.59]一起喵喵喵喵喵[03:03.66]我要穿你的外套[03:05.82]闻你身上的味道[03:07.88]想要变成你的猫[03:09.98]赖在你怀里睡着[03:12.37]每天都贪恋着你的好\"},{title: \"小确幸\",author: \"刘心\",url: \"http://music.163.com/song/media/outer/url?id=1322228868.mp3\",pic: \"http://p1.music.126.net/D1Ov-XMAwUzsr16mQk95fA==/109951163256119128.jpg?param=300x300\",lrc: \"[00:00.00] 作曲 : 小峰峰[00:01.00] 作词 : 小峰峰[00:05.03]编曲：吕宏斌&塞米七[00:05.28]和声：小峰峰[00:05.45]混音：陈秋洁[00:05.63]制作人：小峰峰[00:05.85]唱片：麦袭时代[00:06.40]OP：百纳娱乐[00:06.93][00:07.96]小潘潘：[00:08.31]我们一起学猫叫[00:10.58]一起喵喵喵喵喵[00:12.60]每天都贪恋着你的好[02:42.40][02:42.85]我们一起学猫叫[02:44.84]一起喵喵喵喵喵[02:46.89]在你面前撒个娇[02:49.02]哎呦喵喵喵喵喵[02:51.14]我的心脏砰砰跳[02:53.32]迷恋上你的坏笑[02:55.75]你不说爱我我就喵喵喵[02:59.12][02:59.47]我们一起学猫叫[03:01.59]一起喵喵喵喵喵[03:03.66]我要穿你的外套[03:05.82]闻你身上的味道[03:07.88]想要变成你的猫[03:09.98]赖在你怀里睡着[03:12.37]每天都贪恋着你的好\"},{title: \"一开始\",author: \"Beyond\",url: \"http://music.163.com/song/media/outer/url?id=131592.mp3\",pic: \"http://p1.music.126.net/a9oLdcFPhqQyuouJzG2mAQ==/3273246124149810.jpg?param=300x300\",lrc: \"[00:00.00] 作曲 : 黄家驹[00:01.00] 作词 : 黄家驹[00:17.88]今天我[00:21.27]寒夜里看雪飘过[00:24.34]怀著冷却了的心窝飘远方[00:30.18]风雨里追赶[00:33.36]雾里分不清影踪[00:36.42]天空海阔你与我[00:39.38]可会变 (三子:谁没在变)[00:42.86]多少次[00:45.97]迎著冷眼与嘲笑[00:49.22]谁人都可以 (Woo…)[04:15.70]那会怕有一天只你共我\"}]});zp.init();</script></div>
2.2 如何添加歌曲
只需要在进入163网易云音乐，随便打开一首你喜欢的歌曲，在地址栏中的末尾会出现歌曲的数字标识符，把它复制过来，添加到下面的公式上就好。
如：
公式为：
http://music.163.com/song/media/outer/url?id=****.mp3
三、首页引入音乐模块
<html xmlns:th=\"http://www.w3.org/1999/xhtml\"><head><meta charset=\"utf-8\"><title>首页</title><link rel=\"stylesheet\" th:href=\"@{/zplayer/css/zplayer.min.css}\"/><script th:src=\"@{/zplayer/js/zplayer.min.js}\"></script></head><body><div th:replace=\"musicPlayer :: musicPlayer\"></div></body></html>
完成
