魔改有风险, 魔改前注意备份。此篇魔改需一定代码能力。

魔改效果预览

更改 aplayer 依赖

修改_config.butterfly.yml

  1. CDN.option.aplayer_js
  2. CDN.option.aplayer_css
  3. CDN.option.meting_js

建议将其下载至本地再引入, 博主不保证其可访问性。

1
2
3
aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css
aplayer_js: https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js
meting_js: https://alist.anzhiy.cn/d/anzhiyu/js/Meting2.min.js

meting_js 内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
"use strict";
function _objectSpread(a) {
for (var b = 1; b < arguments.length; b++) {
var c = null == arguments[b] ? {} : arguments[b],
d = Object.keys(c);
"function" == typeof Object.getOwnPropertySymbols &&
(d = d.concat(
Object.getOwnPropertySymbols(c).filter(function (a) {
return Object.getOwnPropertyDescriptor(c, a).enumerable;
})
)),
d.forEach(function (b) {
_defineProperty(a, b, c[b]);
});
}
return a;
}
function _defineProperty(a, b, c) {
return (
b in a ? Object.defineProperty(a, b, { value: c, enumerable: !0, configurable: !0, writable: !0 }) : (a[b] = c), a
);
}
class MetingJSElement extends HTMLElement {
connectedCallback() {
window.APlayer && window.fetch && (this._init(), this._parse());
}
disconnectedCallback() {
this.lock || this.aplayer.destroy();
}
_camelize(a) {
return a
.replace(/^[_.\- ]+/, "")
.toLowerCase()
.replace(/[_.\- ]+(\w|$)/g, (a, b) => b.toUpperCase());
}
_init() {
let a = {};
for (let b = 0; b < this.attributes.length; b += 1)
a[this._camelize(this.attributes[b].name)] = this.attributes[b].value;
let b = [
"server",
"type",
"id",
"api",
"auth",
"auto",
"lock",
"name",
"title",
"artist",
"author",
"url",
"cover",
"pic",
"lyric",
"lrc",
];
this.meta = {};
for (var c = 0; c < b.length; c++) {
let d = b[c];
(this.meta[d] = a[d]), delete a[d];
}
(this.config = a),
(this.api =
this.meta.api ||
window.meting_api ||
"https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r"),
this.meta.auto && this._parse_link();
}
_parse_link() {
let a = [
["music.163.com.*song.*id=(\\d+)", "netease", "song"],
["music.163.com.*album.*id=(\\d+)", "netease", "album"],
["music.163.com.*artist.*id=(\\d+)", "netease", "artist"],
["music.163.com.*playlist.*id=(\\d+)", "netease", "playlist"],
["music.163.com.*discover/toplist.*id=(\\d+)", "netease", "playlist"],
["y.qq.com.*song/(\\w+).html", "tencent", "song"],
["y.qq.com.*album/(\\w+).html", "tencent", "album"],
["y.qq.com.*singer/(\\w+).html", "tencent", "artist"],
["y.qq.com.*playsquare/(\\w+).html", "tencent", "playlist"],
["y.qq.com.*playlist/(\\w+).html", "tencent", "playlist"],
["xiami.com.*song/(\\w+)", "xiami", "song"],
["xiami.com.*album/(\\w+)", "xiami", "album"],
["xiami.com.*artist/(\\w+)", "xiami", "artist"],
["xiami.com.*collect/(\\w+)", "xiami", "playlist"],
];
for (var b = 0; b < a.length; b++) {
let c = a[b],
d = new RegExp(c[0]),
e = d.exec(this.meta.auto);
if (null !== e) return (this.meta.server = c[1]), (this.meta.type = c[2]), void (this.meta.id = e[1]);
}
}
_parse() {
if (this.meta.url) {
let a = {
name: this.meta.name || this.meta.title || "Audio name",
artist: this.meta.artist || this.meta.author || "Audio artist",
url: this.meta.url,
cover: this.meta.cover || this.meta.pic,
lrc: this.meta.lrc || this.meta.lyric || "",
type: this.meta.type || "auto",
};
return (
a.lrc || (this.meta.lrcType = 0),
this.innerText && ((a.lrc = this.innerText), (this.meta.lrcType = 2)),
void this._loadPlayer([a])
);
}
let a = this.api
.replace(":server", this.meta.server)
.replace(":type", this.meta.type)
.replace(":id", this.meta.id)
.replace(":auth", this.meta.auth)
.replace(":r", Math.random());
fetch(a)
.then(a => a.json())
.then(a => this._loadPlayer(a));
}
_loadPlayer(a) {
let b = { audio: a, mutex: !0, lrcType: this.meta.lrcType || 3, storageName: "metingjs" };
if (a.length) {
let a = _objectSpread({}, b, this.config);
for (let b in a) ("true" === a[b] || "false" === a[b]) && (a[b] = "true" === a[b]);
let c = document.createElement("div");
(a.container = c), this.appendChild(c), (this.aplayer = new APlayer(a));
}
}
}
console.log(
"\n %c MetingJS v2.0.1 %c https://github.com/metowolf/MetingJS \n",
"color: #fadfa3; background: #030307; padding:5px 0;",
"background: #fadfa3; padding:5px 0;"
),
window.customElements &&
!window.customElements.get("meting-js") &&
((window.MetingJSElement = MetingJSElement), window.customElements.define("meting-js", MetingJSElement));

开启主题音乐支持

修改 _config.ymlaplayer选项

1
2
3
aplayer:
meting: true
asset_inject: false

修改 _config.butterfly.ymlaplayerInject

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
enable: true
per_page: true

如果需要音乐切换界面不断则需要开启 pjax

1
2
3
4
5
6
7
8
# Pjax
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax:
enable: true
exclude:
# - xxxx
# - xxxx

新建 pug 结构

新建 themes/butterfly/layout/includes/music.pug

1
2
3
#nav-music
#nav-music-hoverTips(onclick='anzhiyu.musicToggle()') 播放音乐
meting-js#1708664797(server="tencent" type="playlist" mutex="true" preload="none" theme="var(--anzhiyu-main)" data-lrctype="0" order="random")

themes/butterfly/layout/includes/layout.pug 底部中引入music.pug

1
2
3
+ include ./music.pug
!=partial('includes/third-party/search/index', {}, {cache: true})
include ./additional-js.pug

添加 css

不会的同学参考Hexo 博客添加自定义 css 和 js 文件

css 中存在大量变量 博主全部的变量如下, 将如下 css在合适的位置 引入即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/* 颜色 */
:root {
--anzhiyu-theme-op: #4259ef23;
--anzhiyu-card-bg-none: rgba(255, 255, 255, 0);
--anzhiyu-main-op-deep: var(--anzhiyu-theme-op-deep) !important;
--anzhiyu-gray-op: #9999992b;
--anzhiyu-theme-top: var(--anzhiyu-theme);
--anzhiyu-white: #fff;
--anzhiyu-white-op: rgba(255, 255, 255, 0.2);
--anzhiyu-black: #000;
--anzhiyu-black-op: rgba(0, 0, 0, 0.2);
--anzhiyu-none: rgba(0, 0, 0, 0);
--anzhiyu-gray: #999999;
--anzhiyu-yellow: #ffc93e;
--anzhiyu-orange: #e38100;
--anzhiyu-border-radius: 8px;
--anzhiyu-main: var(--anzhiyu-theme);
--anzhiyu-main-op: var(--anzhiyu-theme-op);
--anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op);
--anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op);
--anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
--anzhiyu-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
--anzhiyu-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
--anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
--anzhiyu-shadow-red: 0 8px 12px -3px #ee7d7936;
--anzhiyu-shadow-green: 0 8px 12px -3px #87ee7936;
--anzhiyu-shadow-border: 0 8px 16px -4px #2c2d300c;
--anzhiyu-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
--anzhiyu-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
--style-border: 1px solid var(--anzhiyu-card-border);
--anzhiyu-blue-main: #3b70fc;
--style-border-hover: 1px solid var(--anzhiyu-main);
--style-border-dashed: 1px dashed var(--anzhiyu-theme-op);
--style-border-avatar: 4px solid var(--anzhiyu-background);
--style-border-always: 1px solid var(--anzhiyu-card-border);
--style-border-none: 1px solid transparent;
--anzhiyu-white-acrylic1: #fefeff !important;
--anzhiyu-white-acrylic2: #fcfdff !important;
--anzhiyu-black-acrylic2: #08080a !important;
--anzhiyu-black-acrylic1: #0b0b0e !important;
--anzhiyu-main-none: #b8b8b800 !important;
}

[data-theme="light"] {
--anzhiyu-theme-op-deep: #4259efdd;
--global-bg: #f7f9fe;
--anzhiyu-theme: #3b70fc;
--anzhiyu-theme-deep: #1856fb;
--anzhiyu-theme-op: #4259ef23;
--anzhiyu-blue: #3b70fc;
--anzhiyu-red: #d8213c;
--anzhiyu-pink: #ff7c7c;
--anzhiyu-green: #57bd6a;
--anzhiyu-fontcolor: #363636;
--anzhiyu-background: #f7f9fe;
--anzhiyu-reverse: #000;
--anzhiyu-maskbg: rgba(255, 255, 255, 0.6);
--anzhiyu-maskbgdeep: rgba(255, 255, 255, 0.85);
--anzhiyu-hovertext: var(--anzhiyu-theme);
--anzhiyu-ahoverbg: #f7f7fa;
--anzhiyu-lighttext: var(--anzhiyu-main);
--anzhiyu-secondtext: rgba(60, 60, 67, 0.6);
--anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
--anzhiyu-card-btn-bg: #edf0f7;
--anzhiyu-post-blockquote-bg: #fafcff;
--anzhiyu-post-tabs-bg: #f2f5f8;
--anzhiyu-secondbg: #f1f3f8;
--anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
--anzhiyu-card-bg: #fff;
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
--anzhiyu-card-border: #e3e8f7;
}

[data-theme="dark"] {
--anzhiyu-theme-op-deep: #0084ffdd;
--global-bg: #18171d;
--anzhiyu-theme: #0084ff;
--anzhiyu-theme-deep: #0076e5;
--anzhiyu-theme-op: #0084ff23;
--anzhiyu-blue: #0084ff;
--anzhiyu-red: #ff3842;
--anzhiyu-pink: #ff7c7c;
--anzhiyu-green: #57bd6a;
--anzhiyu-fontcolor: #f7f7fa;
--anzhiyu-background: #18171d;
--anzhiyu-reverse: #fff;
--anzhiyu-maskbg: rgba(0, 0, 0, 0.6);
--anzhiyu-maskbgdeep: rgba(0, 0, 0, 0.85);
--anzhiyu-hovertext: #0a84ff;
--anzhiyu-ahoverbg: #fff;
--anzhiyu-lighttext: #f2b94b;
--anzhiyu-secondtext: #a1a2b8;
--anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
--anzhiyu-card-btn-bg: #30343f;
--anzhiyu-post-blockquote-bg: #000;
--anzhiyu-post-tabs-bg: #121212;
--anzhiyu-secondbg: #30343f;
--anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
--anzhiyu-card-bg: #1d1b26;
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
--anzhiyu-card-border: #42444a;
}

新建 themes/butterfly/source/css/_custom/aplayer/aplayer.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
/* 音乐播放器 */

.aplayer.aplayer-narrow .aplayer-body,
.aplayer.aplayer-narrow .aplayer-pic {
height: 66px;
width: 66px;
}

#page:has(.aplayer):has(.aplayer-body):has(.aplayer-list) #post-comment .tk-comments-container > .tk-comment {
border: none;
box-shadow: none;
}

/* 导航栏音乐 */
@media screen and (max-width: 1300px) {
#nav-music {
display: none !important;
}
}

#nav-music {
display: flex;
align-items: center;
z-index: 9;
position: fixed;
bottom: 20px;
left: 20px;
cursor: pointer;
transition: 0.5s;
transform-origin: left bottom;
box-shadow: var(--anzhiyu-shadow-border);
border-radius: 40px;
overflow: hidden;
}

#nav-music:active {
transform: scale(0.97);
}

#nav-music.playing {
box-shadow: 0 0px 12px -3px var(--anzhiyu-none);
animation: playingShadow 5s linear infinite;
}

@keyframes playingShadow {
0% {
box-shadow: 0 0px 12px -3px var(--anzhiyu-none);
}

50% {
box-shadow: 0 0px 12px 0px var(--anzhiyu-main);
}

100% {
box-shadow: 0 0px 12px -3px var(--anzhiyu-none);
}
}

#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
height: 25px;
width: 25px;
border-radius: 40px;
z-index: 1;
transition: 0.3s;
transform: rotate(0deg) scale(1);
border: var(--style-border-always);
animation: changeright 24s linear infinite;
animation-play-state: paused;
}

#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
box-shadow: 0 0 14px #ffffffa6;
transform: rotate(0deg) scale(1.1);
border-color: var(--anzhiyu-white);
animation-play-state: running;
}

@keyframes changeright {
0% {
transform: rotate(0deg) scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}

25% {
transform: rotate(90deg) scale(1.1);
box-shadow: 0 0 14px #ffffff;
}

50% {
transform: rotate(180deg) scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}

75% {
transform: rotate(270deg) scale(1.1);
box-shadow: 0 0 14px #ffffff;
}

100% {
transform: rotate(360deg) scale(1.1);
box-shadow: 0 0 2px #ffffff00;
}
}

#nav-music .aplayer.aplayer-withlrc .aplayer-info {
height: 100%;
color: var(--anzhiyu-fontcolor);
margin: 0;
padding: 0;
display: flex;
align-items: center;
}

#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info {
color: var(--anzhiyu-white);
}

#nav-music.playing #nav-music-hoverTips {
width: 0;
opacity: 0;
}
#nav-music #nav-music-hoverTips {
color: var(--anzhiyu-white);
background: var(--anzhiyu-main);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: center;
display: flex;
border-radius: 40px;
opacity: 0;
font-size: 12px;
z-index: 2;
transition: 0.3s;
}

#nav-music:hover:not(.playing) #nav-music-hoverTips {
opacity: 1;
}

#nav-music
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap:hover
.aplayer-bar
.aplayer-played
.aplayer-thumb {
display: none;
}

#nav-music .aplayer {
background: var(--card-bg);
border-radius: 60px;
height: 41px;
display: flex;
margin: 0;
transition: 0.3s;
border: var(--style-border);
box-shadow: none;
}

#nav-music.playing .aplayer {
background: var(--anzhiyu-main-op-deep);
border: var(--style-border-hover);
backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: blur(20px);
}

#nav-music .aplayer .aplayer-notice {
display: none;
}

#nav-music .aplayer .aplayer-miniswitcher {
display: none;
}

#nav-music .aplayer .aplayer-body {
position: relative;
display: flex;
align-items: center;
}

#nav-music .aplayer-list {
display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-music {
margin: 0;
display: flex;
align-items: center;
padding: 0 12px 0 8px;
cursor: pointer;
z-index: 1;
height: 100%;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
display: none;
}

#nav-music .aplayer.aplayer-withlist .aplayer-info {
border: none;
}

#nav-music .aplayer .aplayer-pic .aplayer-button {
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
margin: 0;
transition: 0.3s;
}
#nav-music .aplayer .aplayer-pic:has(.aplayer-button.aplayer-play) {
animation-play-state: paused;
}
#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
margin-left: 8px;
}
#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
cursor: pointer;
line-height: 1;
display: inline-block;
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
transition: 0.3s;
user-select: none;
}

#nav-music .aplayer .aplayer-info .aplayer-controller {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0;
padding: 0;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
height: 100%;
background: none;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
height: 100%;
opacity: 0.1;
background-color: var(--anzhiyu-white) !important;
animation: lightBar 5s ease infinite;
animation-play-state: paused;
}

#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
animation-play-state: running;
}

@keyframes lightBar {
0% {
opacity: 0.1;
}

60% {
opacity: 0.3;
}

100% {
opacity: 0.1;
}
}

/* 歌词 */
#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
width: 0;
opacity: 0;
transition: 0.3s;
margin-top: -2px;
padding: 5px 0;
}
#nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc {
margin-left: 8px;
}
#nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc {
width: 200px;
margin-bottom: 0;
opacity: 1;
}

#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
color: var(--anzhiyu-white);
border: none;
}

#nav-music .aplayer .aplayer-lrc:after,
#nav-music .aplayer .aplayer-lrc:before {
display: none;
}

#nav-music .aplayer .aplayer-lrc p {
color: #ffffffb3;
}

js 处理

不会的同学参考Hexo 博客添加自定义 css 和 js 文件

_config.butterfly.yml 中我引入了两个 js,一个是大量工具方法的函数的 js,一个是存储了很多状态处理的 js,而音乐的状态处理是在anzhiyu.js中处理的, 注入绑定函数是在anzhiyufunction.js中处理的。

1
2
3
# 自定义js
- <script async data-pjax src="/js/anzhiyu.js"></script>
- <script async data-pjax src="/js/anzhiyufunction.js"></script>

anzhiyu.js 内容如下, 感谢李文若 发现的右键 bug, 已修复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var anzhiyu_musicPlaying = false;
var anzhiyu_musicFirst = false;
var navMusicEl = document.getElementById("nav-music");
var anzhiyu = {
//切换音乐播放状态
musicToggle: function (changePaly = true) {
if (!anzhiyu_musicFirst) {
musicBindEvent();
anzhiyu_musicFirst = true;
}
let msgPlay = '<i class="fa-solid fa-play"></i><span>播放音乐</span>'; // 此處可以更改為你想要顯示的文字
let msgPause = '<i class="fa-solid fa-pause"></i><span>暂停音乐</span>'; // 同上,但兩處均不建議更改
if (anzhiyu_musicPlaying) {
navMusicEl.classList.remove("playing");
// 修改右键菜单文案为播放
// document.getElementById("menu-music-toggle").innerHTML = msgPlay;
document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停";
// document.querySelector("#consoleMusic").classList.remove("on");
anzhiyu_musicPlaying = false;
navMusicEl.classList.remove("stretch");
} else {
navMusicEl.classList.add("playing");
// 修改右键菜单文案为暂停
// document.getElementById("menu-music-toggle").innerHTML = msgPause;
// document.querySelector("#consoleMusic").classList.add("on");
anzhiyu_musicPlaying = true;
navMusicEl.classList.add("stretch");
}
if (changePaly) document.querySelector("#nav-music meting-js").aplayer.toggle();
},
// 音乐伸缩
musicTelescopic: function () {
if (navMusicEl.classList.contains("stretch")) {
navMusicEl.classList.remove("stretch");
} else {
navMusicEl.classList.add("stretch");
}
},

//音乐上一曲
musicSkipBack: function () {
document.querySelector("#nav-music meting-js").aplayer.skipBack();
},

//音乐下一曲
musicSkipForward: function () {
document.querySelector("#nav-music meting-js").aplayer.skipForward();
},

//获取音乐中的名称
musicGetName: function () {
var x = $(".aplayer-title");
var arr = [];
for (var i = x.length - 1; i >= 0; i--) {
arr[i] = x[i].innerText;
}
return arr[0];
},
};

addRightMenuClickEvent();

anzhiyufunction.js内容如下

1
2
3
4
5
6
7
8
9
// 音乐绑定事件
function musicBindEvent() {
document.querySelector("#nav-music .aplayer-music").addEventListener("click", function () {
anzhiyu.musicTelescopic();
});
document.querySelector("#nav-music .aplayer-button").addEventListener("click", function () {
anzhiyu.musicToggle(false);
});
}

进阶

如果有魔改右键菜单的同学, 可以尝试加入以下方法来判断是否点击的为音乐以控制右键可以下一曲, 上一曲, 暂停音乐

1
2
3
4
5
const metingJs = document.querySelector("#nav-music meting-js");
//判断是否是音乐
if (metingJs.contains(event.target)) {
} else {
}

总结

做完以后大致的逻辑就是第一次只能点播放, 点完第一次的播放后, 右键可以控制上一曲和下一曲, 然后点击名称可以缩回去, 歌词部分胶囊控制进度,但是目前有个 bug 就是因为 aplayer 给控制条绑定的事件是鼠标抬起事件, 导致点击也可以切换进度, 但这不是我所期望的, 如果可以做成歌词部分点击不触发, 仅拖拽触发就好了 QWQ。