学习,
让视野更宽阔!

QPlayer2 | 网站底部悬浮音乐播放

QPlayer,一款简洁小巧的底部悬浮音乐播放器插件,支持网易云音乐解析,由GitHub用户Jrohy开发,GitHub项目地址,最新版v1.3.4.2,已不再更新。

如今,MoeShin将代码优化后制成QPlayer2,现已支持WordPress、Typecho、Z-Blog。

一、效果展示

1、默认收起

2、展开播放器与展开歌曲列表

3、整体效果

个人觉得不错,现分享给大家。

二、安装插件

1、WordPress

https://moeshin.com/archives/QPlayer2-WordPress.html

GitHub地址:

https://github.com/moeshin/QPlayer2-WordPress

WordPress后台设置

2、Typecho

https://moeshin.com/archives/QPlayer2-Typecho.html

GitHub地址:

https://github.com/moeshin/QPlayer2-Typecho

3、Z-Blog

https://moeshin.com/archives/QPlayer2-ZBlog.html

GitHub地址:

https://github.com/moeshin/QPlayer2-ZBlog

三、配置歌曲列表

示例:

[{
    "name": "Nightglow",
    "artist": "蔡健雅",
    "audio": "https://cdn.jsdelivr.net/gh/moeshin/QPlayer-res/Nightglow.mp3",
    "cover": "https://cdn.jsdelivr.net/gh/moeshin/QPlayer-res/Nightglow.jpg",
    "lrc": "https://cdn.jsdelivr.net/gh/moeshin/QPlayer-res/Nightglow.lrc"
}, {
    "name": "やわらかな光",
    "artist": "やまだ豊",
    "audio": "https://cdn.jsdelivr.net/gh/moeshin/QPlayer-res/やわらかな光.mp3",
    "cover": "https://cdn.jsdelivr.net/gh/moeshin/QPlayer-res/やわらかな光.jpg",
    "lyrics": "[00:00.00]请欣赏"
}]

笔者整理的一些歌曲:

[{ 
"name":"平凡的一天",
"artist":"毛不易",
"audio":"https://music.163.com/song/media/outer/url?id=569214247.mp3",
"cover":"https://p2.music.126.net/vmCcDvD1H04e9gm97xsCqg==/109951163350929740.jpg?param=106x106"
},

 {
"name":"小情歌",
"artist":"苏打绿",
"audio":"https://music.163.com/song/media/outer/url?id=375328.mp3",
"cover":"https://p2.music.126.net/kaV4_oULlzEYWoXP2Qi31Q==/109951163434342307.jpg?param=106x106"
},

{
"name":"写给黄淮(cover:解忧邵帅)",
"artist":"西彬",
"audio":"https://music.163.com/song/media/outer/url?id=1343506065.mp3",
"cover":"https://p2.music.126.net/NeZEUwXVyNyoqacFSGWsdQ==/109951163832648101.jpg?param=106x106"
},

 {
"name":"突然之间",
"artist":"G.E.M.邓紫棋",
"audio":"https://music.163.com/song/media/outer/url?id=1323301365.mp3",
"cover":"https://p2.music.126.net/X7f92tSJ-b0_sC1u9tgAyQ==/109951163654227442.jpg?param=106x106"
},

{
"name":"接受",
"artist":"梁静茹",
"audio":"https://music.163.com/song/media/outer/url?id=254271.mp3",
"cover":"https://p2.music.126.net/dr9lwZeuTDjbVTDaz5K0zQ==/18796151278553471.jpg?param=106x106"
},

{
"name":"喜帖街",
"artist":"谢安琪",
"audio":"https://music.163.com/song/media/outer/url?id=308299.mp3",
"cover":"https://p2.music.126.net/dLkalW4CyC6hAZQS6xXFeA==/109951163649564629.jpg?param=106x106"
},

{
"name":"孤单心事",
"artist":"颜人中",
"audio":"https://music.163.com/song/media/outer/url?id=1361988914.mp3",
"cover":"https://p2.music.126.net/0KCMOKHHbimwfdVvPPBpTA==/109951164034526943.jpg?param=106x106"
},

{
"name":"画 (Live Piano Session II)",
"artist":"G.E.M.邓紫棋",
"audio":"https://music.163.com/song/media/outer/url?id=412911436.mp3",
"cover":"https://p2.music.126.net/fouKnh_hQKyyaCZ2PIQUEA==/1410673427960641.jpg?param=106x106"
}]

四、插件下载

方式一:

此处内容请您 》 留言评论 》 刷新网页 》 查看

方式二:

赞(2) 打赏
分享到:
转载请注明出处:技术松鼠 » QPlayer2 | 网站底部悬浮音乐播放

评论 抢沙发

评论前请先登录!

觉得有用,就赞赏一下吧!

支付宝扫一扫打赏

微信扫一扫打赏