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

注意：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"
}]