1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 两步实现在网站左下角实现音乐播放器弹窗听歌

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

时间:2019-12-26 18:55:38

相关推荐

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

一、播放样式

二、引入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: "/song/media/outer/url?id=30987293.mp3",pic: "http://p1./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: "/song/media/outer/url?id=131589.mp3",pic: "http://p1./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: "/song/media/outer/url?id=571545156.mp3",pic: "http://p1./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: "/song/media/outer/url?id=27646783.mp3",pic: "http://p1./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: "/song/media/outer/url?id=1322228868.mp3",pic: "http://p1./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: "/song/media/outer/url?id=131592.mp3",pic: "http://p1./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网易云音乐,随便打开一首你喜欢的歌曲,在地址栏中的末尾会出现歌曲的数字标识符,把它复制过来,添加到下面的公式上就好。

如:

公式为:

/song/media/outer/url?id=****.mp3

三、首页引入音乐模块

<html xmlns:th="/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>

完成

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。