效果预览

效果预览

  • PC端效果预览（点击黑胶唱片后播放音乐）
    PC端效果预览

  • 移动端效果预览（点击黑胶唱片后歌词显掩）
    移动端效果预览

更新记录

更新记录

更新记录

2024-01-02

  • 增加手机端点击黑胶唱片歌词显掩
  • 增加唱片切换动画（感觉不怎么样，没办法个人能力有限 ）

魔改

引入文件

  • 在主题配置文件_config.anzhiyu.yml的最下方修改CDN.option.meting_api
1
2
3
4
-  aplayer_css:
-  aplayer_js:
+  aplayer_css: https://cdn.cbd.int/naokuo-blog@1.2.3/css/APlayer.min.css
+  aplayer_js: https://cdn.cbd.int/naokuo-blog@1.2.3/js/APlayer.min.js

修改

  1. CSS
  • 在路径themes/anzhiyu/source/css/_custom（没有_custom目录需要自己新建）新建naokuo_music.styl，然后复制粘贴以下内容：
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
.naokuo-song-wrap
  padding-top: 63px

  &.naokuo-ab-song 
    display: none
    .naokuo-song-disc
      position: relative
      width: 207px
      height: 207px
      margin: 0 auto

      &:after
        content: " "
        position: absolute   
        width: 66px
        height: 106px
        top: -45px
        left: 90px
        z-index: 5
        -webkit-transform: rotate(-37deg)
        -ms-transform: rotate(-37deg)
        transform: rotate(-37deg)
        transition-property: all
        transition-duration: 0.8s
        -webkit-transform-origin: left top
        -ms-transform-origin: left top
        transform-origin: left top
        background: url(https://s11.ax1x.com/2023/12/30/piOdl28.png) no-repeat
        background-size: contain

      // 播放拨片旋转
      &.naokuo-play
        &:after
          -webkit-transform: rotate(-7deg)
          -ms-transform: rotate(-7deg)
          transform: rotate(-7deg)  
        .naokuo-song-turn
          .naokuo-song-rollwrap
            .naokuo-song-img
              // 播放信息图片
              &.a-circling
                -webkit-animation: circling 20s linear infinite
                animation: circling 20s linear infinite

      .naokuo-song-turn
        width: 100%
        height: 100%

        &:before
          content: " "
          position: absolute
          left: 0
          right: 0
          top: 0
          bottom: 0
          z-index: 2
          background: url(https://s11.ax1x.com/2023/12/30/piOJfGF.png) no-repeat
          background-size: contain

        .naokuo-song-rollwrap
          position: absolute
          width: 150px
          height: 150px
          left: 50%
          top: 50%
          z-index: 1
          margin: -75px 0 0 -75px
          .naokuo-song-img
            width: 100%
            height: 100%
            border-radius: 50%
            overflow: hidden
            background: url(https://s11.ax1x.com/2023/12/30/piOJWPU.png) no-repeat
            // background-size: contain
            background-size: cover
            // 暂停
            &.a-circling
              -webkit-animation-play-state: paused
              animation-play-state: paused

              
        .naokuo-song-lgour,
        .naokuo-song-light
          position: absolute
          left: 0
          right: 0
          top: 0
          bottom: 0
          z-index: 3

        .naokuo-song-light
          background: url(https://s11.ax1x.com/2023/12/30/piOJybq.png) no-repeat
          background-size: contain

@media screen and (min-width: 360px)
  .naokuo-song-wrap
    padding-top: 70px

    &.naokuo-ab-song 
      .naokuo-song-disc
        width: 247px
        height: 247px

        &:after
          width: 73px
          height: 118px
          top: -50px
          left: 112px

        .naokuo-song-turn
          &:before
            background-image: url(https://s11.ax1x.com/2023/12/30/piOJgaV.png)

          .naokuo-song-light
            background-image: url(https://s11.ax1x.com/2023/12/30/piOJcV0.png)

          .naokuo-song-rollwrap
            width: 184px
            height: 184px
            margin: -92px 0 0 -92px

@media screen and (min-width: 414px)
  .naokuo-song-wrap
    padding-top: 80px

    &.naokuo-ab-song 
      .naokuo-song-disc
        width: 285px
        height: 285px
        // 唱片拨杆 
        &:after
          width: 84px
          height: 136px
          top: -60px
          left: 130px
          background-image: url(https://s11.ax1x.com/2023/12/30/piOdl28.png)

        // 唱片
        .naokuo-song-turn
          &:before
            background-image: url(https://s11.ax1x.com/2023/12/30/piOJ4xJ.png)

          // 唱片反光
          .naokuo-song-light
            background-image: url(https://s11.ax1x.com/2023/12/30/piOJ25T.png)

          .naokuo-song-rollwrap
            width: 212px
            height: 212px
            margin: -106px 0 0 -106px

// 手机端
// @media screen and (min-height: 724px)
//   .naokuo-song-wrap
//     &.naokuo-ab-song
//       padding-top: 30px

@media screen and (max-height: 553px)
  .naokuo-song-wrap
    &.naokuo-ab-song
      padding-top: 0

@media screen and (min-width: 414px) and (min-height:800px)
  .naokuo-song-wrap
    &.naokuo-ab-song
      padding-top: 90px

@media screen and (min-width: 360px) and (max-height:700px)
  .naokuo-song-wrap
    &.naokuo-ab-song
      padding-top: 0px


@-webkit-keyframes circling
  0%
    -webkit-transform: rotate(0deg)
    transform: rotate(0deg)
  to
    -webkit-transform: rotate(1turn)
    transform: rotate(1turn)

@keyframes circling
  0%
    -webkit-transform: rotate(0deg)
    transform: rotate(0deg)
  to
    -webkit-transform: rotate(1turn)
    transform: rotate(1turn)

#anMusic-page 
  .aplayer
    &.aplayer-withlrc 
      .aplayer-pic
        display: none !important      
      .naokuo-song-wrap
        &.naokuo-ab-song
          display: block !important

@media screen and (min-width: 768px)
  #anMusic-page 
    .aplayer
      &.aplayer-withlrc 
        .aplayer-lrc 
          .aplayer-lrc-contents
            position: absolute
            top: 36%


  • 在路径themes/anzhiyu/source/css/index.styl引入
1
2
3
4
5
6
7
8
9
10
11
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
@import '_third-party/*'
@import '_extra/**/*.css'
+ @import '_custom/*'
  • 修改路径themes/anzhiyu/source/css/_page/music.styl 大概159 和327行
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
// 159行处修改
          .aplayer-lrc
            height 800%
            margin-top 10px
            mask-image linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, #0000, #0000)
            p
-             font-size 20px
-             line-height: 20px !important;
-             height: 20px !important;
-             margin: 20px 0 !important;
-             color #fff
-             &.aplayer-lrc-current {
-               min-height: 20px;
-             }
-           &::after, &::before
-             display none
+             font-size 16px
+             line-height: 20px !important
+             height: 20px
+             margin: 20px 0 !important
+             color #fff
+             &.aplayer-lrc-current
+               min-height: 20px
+               height: auto
+           &::after,&::before
+             display none
+           // 歌词模糊
+           &:not(.aplayer-lrc-current) 
+             p
+               opacity: 0.6
+               cursor: pointer
+               filter: blur(0.8px)
+           .aplayer-lrc-contents
+             p
+               &.aplayer-lrc-current
+                 filter: none
+                 opacity: 1
+                 font-weight: 700
+                 font-size 20px
+           &:hover
+             .aplayer-lrc-contents
+               &:not(.aplayer-lrc-current) 
+                 p
+                   filter: none
+                   opacity: 1

// 327行处修改
        .aplayer-body
          width 100%
          position fixed
          margin auto
          left 0
          right 0
          top 100px
          .aplayer-info
            .aplayer-lrc
              margin-top 40px
              height auto
              max-height 200%
              min-height 100%
              mask-image linear-gradient(to bottom, #000, #000, #000, #000, #0000, #0000)
              p
-               &.aplayer-lrc-current
-                 color #33a673
+               font-size: 12px
+               &.aplayer-lrc-current
+                 // color #ffffff
+                 font-size: 16px !important
+                 // font-weight: 700

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
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
body[data-type="music"]
  background rgb(13, 13, 13)
  #body-wrap
    justify-content: flex-start;
  #center-console + label i
    background: var(--anzhiyu-white) !important
  .layout
    flex-direction: row;
  #page
    border 0
    box-shadow none !important
    padding 0 !important
    background transparent !important
    .page-title
      display: none
  #page-header
    #nav
      backdrop-filter none !important
      background 0 0 !important
      border-bottom none !important
      #blog_name,
      .mask-name-container,
      #menus,
      #nav-right .nav-button,
      #nav-right #toggle-menu
        a, .back-home-button
          color var(--anzhiyu-white)
  #footer, #nav-music
    display none
  #an_music_bg
    display block
  #web_bg
    display none
  .s-sticker
    div
      color var(--anzhiyu-white) !important

[data-theme="dark"]
  body[data-type="music"]
    .page
      #page-header
        &:before
          background-color transparent


#an_music_bg
  display none
  filter blur(63px)
  opacity 0.6
  position fixed
  z-index -999
  background-attachment local
  background-position center center
  background-size cover
  background-repeat no-repeat
  width 200%
  height 200%
  top -50%
  left -50%
  transform rotate(0deg)
  transition .3s

if hexo-config('nav_music.console_widescreen_music') == false
  body
    &:has(#console.show)
      #nav-music
        display: none !important
if hexo-config('nav_music.enable') == false
  #nav-music
    display: none !important
  body
    &:has(#console.show)
      #nav-music
        display: flex !important;

@media screen and (max-width: 1400px)
  body
    #anMusic-page
      #anMusicSwitching, #anMusicRefreshBtn, #anMusicBtnGetSong
        right 7vw
      #anMusicSwitching
        bottom: 100px
      #anMusicRefreshBtn
        bottom: 160px
      #anMusicBtnGetSong
        bottom: 220px

#anMusic-page
  #anMusicRefreshBtn, #anMusicBtnGetSong, #anMusicSwitching
    position: fixed;
    display: flex;
    width: 50px;
    height: 50px;
    bottom: 100px;
    padding: 5px;
    background: var(--anzhiyu-white-op);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 50%;
    color: #fff;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index 2
  #anMusicBtnGetSong
    right: 11vw;
  #anMusicRefreshBtn
    right: 7vw;
  #anMusicSwitching
    right: 15vw;
  +maxWidth768()
    div#anMusicBtnGetSong
      right: 80px;
      bottom: 150px;
    div#anMusicRefreshBtn
      right: 20px;
      bottom: 150px;
    div#anMusicSwitching
      right: 140px;
      bottom: 150px;
  meting-js
    .aplayer
      display flex
      flex-direction row-reverse
      background rgba(0, 0, 0, 0)
      border none
      box-shadow none
      .aplayer-body
        width 40%
        height calc(100vh - 169px)
        .aplayer-pic
          float none
          width 180px
          height 180px
          border-radius 12px
          margin auto
          left 0
          right 0
          transition: background-image 0.5s ease-in-out;
          background-size: cover;
          background-color: transparent !important;
        .aplayer-info
          margin 0 20px 0 20px
          border-bottom none
          .aplayer-music
            text-align center
            height auto
            margin 15px
            .aplayer-author, .aplayer-title
              font-size 2rem
              font-weight 700
              color #fff

          .aplayer-lrc
            height 800%
            margin-top 10px
            mask-image linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, #0000, #0000)
            p
              font-size 16px
              line-height: 20px !important
              height: 20px
              margin: 20px 0 !important
              color #fff
              &.aplayer-lrc-current
                min-height: 20px
                height: auto
            &::after,&::before
              display none
            // 歌词模糊
            &:not(.aplayer-lrc-current) 
              p
                opacity: 0.6
                cursor: pointer
                filter: blur(0.8px)
            .aplayer-lrc-contents
              p
                &.aplayer-lrc-current
                  filter: none
                  opacity: 1
                  font-weight: 700
                  font-size 20px
            &:hover
              .aplayer-lrc-contents
                &:not(.aplayer-lrc-current) 
                  p
                    filter: none
                    opacity: 1
          .aplayer-controller 
            position fixed
            max-width 1500px
            margin auto
            left 0
            right 0
            bottom 50px
            .aplayer-bar-wrap 
              margin 0 160px 0 150px
              .aplayer-bar
                height: 6px;
                border-radius: 4px;
                .aplayer-played
                  height: 6px;
                  border-radius: 4px;
                  background var(--anzhiyu-white) !important
                  .aplayer-thumb
                    width 20px
                    height 20px
                    margin-top: -7px
                    transform none
                    background #fff !important
                .aplayer-loaded
                  height: 6px;
                  border-radius: 4px;
            .aplayer-time
              position absolute
              width 100%
              bottom 21px
              height 0
              display flex
              justify-content flex-end
              .aplayer-volume-wrap
                .aplayer-volume-bar-wrap
                  bottom: 0;
                  right: -5px;
              .aplayer-icon
                width 2rem
                height 2rem
                margin-left 15px
                path
                  fill var(--anzhiyu-white)
                  opacity 0.8
                &.aplayer-icon-loop
                  margin-right 15px
              .aplayer-time-inner
                margin-right 18px
                margin-top -8px
              .aplayer-icon-back
                position absolute
                left 0
                display inline
              .aplayer-icon-play
                position absolute
                left 40px
                display inline
              .aplayer-icon-forward
                position absolute
                left 80px
                display inline

              .aplayer-icon-menu
                display none

      .aplayer-list
          width 60%
          height 100%
        ol
          padding-right 25px
          & > li
            border-top 1px solid transparent
            font-size 14px
            &:hover
              background #ffffff33
              border-radius 6px
            &.aplayer-list-light
              background #ffffff33
              border-radius 6px
              padding 20px 15px
              span.aplayer-list-title
                font-weight: bolder;
              .aplayer-list-cur
                display none
            span
              color var(--anzhiyu-white)
              &.aplayer-list-author
                opacity 0.6


@media screen and (max-width: 768px)
  body[data-type="music"]
    #rightside
      display none
    #content-inner,#page
      z-index auto
  #anMusic-page
    meting-js 
      .aplayer
        .aplayer-list
          position fixed
          z-index 1002
          width 100%
          bottom -88%
          left 0
          background var(--sidebar-bg)
          height auto
          border-radius 15px 15px 0px 0px
          padding 15px 0px
          &.aplayer-list-hide
            bottom 0% !important
          ol
            max-height 60vh !important
            padding-right 0px
            & > li
              display flex
              margin 0 10px
              span
                color var(--font-color)
                &.aplayer-list-title
                  width 30%
                  max-width 55%
                  width auto
                  display -webkit-box
                  -webkit-line-clamp 1
                  overflow hidden
                  -webkit-box-orient vertical
                &.aplayer-list-author
                  position absolute
                  right 10px
                  width auto
                  max-width 35%
                  display -webkit-box
                  -webkit-line-clamp 1
                  overflow hidden
                  -webkit-box-orient vertical
              &.aplayer-list-light
                background #33a673
                padding 5px 20px
                border-radius 10px
                span
                  color #fff
                  &.aplayer-list-author
                    right 15px
        .aplayer-body
          width 100%
          position fixed
          margin auto
          left 0
          right 0
          top 100px
          .aplayer-info
            .aplayer-lrc
              margin-top 40px
              height auto
              max-height 200%
              min-height 100%
              mask-image linear-gradient(to bottom, #000, #000, #000, #000, #0000, #0000)
              p
                font-size: 12px
                &.aplayer-lrc-current
                  // color #ffffff
                  font-size: 16px !important
                  // font-weight: 700
            .aplayer-controller
              width 100%
              bottom 100px
              .aplayer-volume-wrap
                left -66px
                .aplayer-volume-bar-wrap
                  bottom 0px
                  right 7px
              .aplayer-bar-wrap
                margin 0 30px
            .aplayer-controller
              .aplayer-time
                bottom -40px
                .aplayer-time-inner
                  position absolute
                  width 100%
                  margin-right 0
                  margin-top -33px
                  .aplayer-dtime
                    position absolute
                    right 30px
                  .aplayer-ptime
                    position absolute
                    left 35px
                .aplayer-icon-back
                  margin auto
                  right 110px
                .aplayer-icon-play
                  margin auto
                  right 0
                  left 0
                .aplayer-icon-forward
                  margin auto
                  left 110px
                  right 0
                .aplayer-icon-order
                  position absolute
                  left 22px
                .aplayer-icon-loop
                  position absolute
                  right 25px
                .aplayer-icon-menu
                  display inline
                  position absolute
                  right 25px
                  top -90px

  1. JavaScript
  • 修改路径themes/anzhiyu/source/js/utils.js 大概911 行
  • 设置随机播放一首时黑胶唱片的状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    // 监听增加单曲按钮
    anMusicBtnGetSong.addEventListener("click", () => {
      if (changeMusicListFlag) {
        const anMusicPage = document.getElementById("anMusic-page");
        const metingAplayer = anMusicPage.querySelector("meting-js").aplayer;
        const allAudios = metingAplayer.list.audios;
        const randomIndex = Math.floor(Math.random() * allAudios.length);
        // 随机播放一首
        metingAplayer.list.switch(randomIndex);
      } else {
        anzhiyu.cacheAndPlayMusic();
      }
+     // 黑胶唱片状态
+     document.querySelector(".aplayer-button").classList.contains("aplayer-pause") ? document.querySelector(".naokuo-song-disc").classList.add("naokuo-play") : document.querySelector(".naokuo-song-disc").classList.remove("naokuo-play");
    });

总结

  • 如果你发现进度条拖动出现跳回的情况，大概是你启用了swpp-backends。只要在规则文件sw-rules.js中声明skipRequest即可。
  • 跳过链接为你的meting_api链接如：https://meting.qjqq.cn/?server=:server&type=:type&id=:id&auth=:auth&r=:r。
  • anzhiyu主题默认的是https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&auth=:auth&r=:r。
  • 如果你没有修改过meting_api就直接使用以下即可
1
2
3
4
5
/**
 * @param request {Request}
 * @return {boolean}
 */
module.exports.skipRequest = request => request.url.startsWith("https://i0.hdslb.com") || request.url.startsWith('https://api.i-meto.com');