两步实现在网站左下角实现音乐播放器弹窗听歌

一、播放样式

二、引入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>

完成