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后台设置

注意:WordPress 5.4可能不兼容新版QPlayer,请使用经典版

原样式有点错位,我修改了一下CSS。设置差不多,只是歌曲列表格式略有不同,这里分享一下:

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

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

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

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

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

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

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

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

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"
}]

四、插件下载







文件名称:QPlayer & QPlayer2
适用版本:WordPress / Typecho / ZBlog
更新日期:2021-09-20
文件大小:60KB


Invitation
QQ Group
1095632335

created:04/01/2020

Welcome to the Group

Use this card to join us and participate in a pleasant discussion together .

Welcome to JISHUSONGSHU Group,wish you a nice day .