炒冷饭，源自本站Blog修改记录

调整 Aplayer 收回方式、隐藏歌词、美化、自动关闭歌词列表

缩小播放器时有过渡的关闭歌词列表(2025/12/23)

缩小播放器歌词列表没有关闭时关闭会直接消失没有过渡，就很突兀，这个情况建站以来都想解决，但是没搜到教程(可能搜索方式不对)就自己动手了。
原本的官方的api好像是直接display:none(AI说的，没证实)，导致改动原来一直没效果。后来想起之前模拟点击关掉歌词的方法，效果确实可以，但不能每次都触发按按钮，否则导致缩小时给他打开回去。后面用检测class类名加延时的方法，有成效但还是会抽风。最后改为直接对比最小高度和延时的方法。代码水平和思路不高，如有更改好的方法欢迎指点。
效果请查看本站效果。

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
//关闭歌曲列表
(function() {
  const initAPlayerSmooth = () => {
    const container = document.querySelector('.aplayer-fixed');
    if (!container) return;

    const switcher = container.querySelector('.aplayer-miniswitcher');
    const menuBtn = container.querySelector('.aplayer-icon-menu');
    const listEl = container.querySelector('.aplayer-list');
    const bodyEl = container.querySelector('.aplayer-body'); // 获取主体以操作 transition-delay
    
    let isInternalClick = false; // 防死循环标记

    switcher.addEventListener('click', function(e) {
      if (isInternalClick) return;

      // 1. 判断播放器当前是否展开 (非 narrow 状态)
      const isPlayerExpanded = !container.classList.contains('aplayer-narrow');
      
      // 2. 物理高度检查：判断列表是否真的在显示
      // 如果 offsetHeight 大于 5（留点误差余量），说明列表是打开状态
      const isListOpen = listEl && listEl.offsetHeight > 5;

      if (isPlayerExpanded) {
        // 如果列表开着，我们需要先处理列表
        if (isListOpen) {
          // 拦截本次原生的折叠动作
          e.stopImmediatePropagation();
          e.preventDefault();

          // 执行期间屏蔽 2s 延迟，设置为 0s 立即响应
          if (bodyEl) {
            bodyEl.style.setProperty('transition-delay', '0s', 'important');
          }

          // 模拟点击菜单按钮关闭列表（触发 CSS 的 max-height 动画）
          menuBtn.click();

          // 开启标记，等待动画结束后触发真正的折叠
          isInternalClick = true;
          setTimeout(() => {
            switcher.click();
            isInternalClick = false;

            // 执行完折叠动作后，恢复原来的 transition-delay
            // 延迟 500ms 是为了确保收缩动画彻底完成后再移除样式
            setTimeout(() => {
              if (bodyEl) {
                bodyEl.style.removeProperty('transition-delay');
              }
            }, 400);

          }, 400); // 400ms 对应 CSS 中的 transition 时间
        } 
        // 如果列表本来就是关的 (offsetHeight <= 5)，则不拦截，直接走原生折叠
      }
    }, true); // 使用捕获阶段
  };

  // 轮询确保 APlayer 加载完成
  const checkAPlayer = setInterval(() => {
    const switcher = document.querySelector('.aplayer-fixed .aplayer-miniswitcher');
    if (switcher) {
      initAPlayerSmooth();
      clearInterval(checkAPlayer);
    }
  }, 500);
})();

毛玻璃、夜间模式美化(2025/8/13)

参考hexo博客butterfly主题aplyer音乐播放器美化与深色模式
效果本站播放器。大佬的样式，豪康(好看)！

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
/*aplayer日间模式调整*/
/*背景色*/
.aplayer{
	background: rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: relative;
}
.aplayer.aplayer-fixed .aplayer-lrc:after,.aplayer.aplayer-fixed .aplayer-lrc:before {
	display: none
}
.aplayer.aplayer.aplayer-fixed .aplayer-body{
	background:rgba(255, 255, 255, 0.60)!important;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
	position: fixed;
}
/*毛玻璃效果*/
.aplayer-list{
	backdrop-filter: blur(3px);
}
.aplayer-info{
	backdrop-filter: blur(3px);
}
/*滚动条*/
.aplayer .aplayer-list ol::-webkit-scrollbar {
	width: 5px
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: #b0e1ff
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
	background-color: #b0e1ff
}
/*圆角*/
.aplayer.aplayer-fixed .aplayer-list{
    border-radius: 6px 6px 0 0!important;
}
.aplayer.aplayer-fixed .aplayer-miniswitcher{
    border-radius: 0 6px 6px 0!important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{
    border-radius: 6px!important;
}	
.aplayer-body{
    border-radius:0 6px 6px 0!important;
}
.aplayer.no-destroy.no-reload.aplayer-withlist.aplayer-fixed{
    border-radius:6px 6px 0 0!important;
}
/*选中与播放中歌曲激活颜色*/
.aplayer .aplayer-list ol li:hover{
    background: #b0e1ff!important;
}
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #ffdffa!important;
}
/*aplayer黑暗模式*/
[data-theme=dark]
.aplayer{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer.aplayer-fixed .aplayer-body{
    background: rgba(22, 22, 22, 0.60)!important;
    color: rgb(255, 255, 255);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1);
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{
	fill: #d4d4d4;
}
[data-theme=dark]	
.aplayer .aplayer-list ol li:hover{
    background: #407290!important;
}
[data-theme=dark]
.aplayer .aplayer-list ol li.aplayer-list-light{
    background: #9c8098!important;
}
[data-theme=dark]
.aplayer .aplayer-info .aplayer-controller .aplayer-time{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-index{
    color: #d4d4d4;
}
[data-theme=dark]
.aplayer .aplayer-list ol li .aplayer-list-author{
    color: #d4d4d4;
}

Aplayer 收回方式

调整 Aplayer 收回方式及隐藏歌词

Butterfly：添加全局吸底 Aplayer 播放器
CSS transition 小技巧！如何保留 hover 的状态？

参考并添加了一点小动画:

1
2
3
4
5
6
7
8
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{
    left:-66px!important;
    transition-delay: 2s;
}/*隐藏播放器*/
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover{
    left:0!important;
    transition-delay: 0s;
}

隐藏歌词

歌词默认显示,在_config.butterfly.yml替换CDN模拟点击关闭歌词。
例如：

1
2
3
4
5
bottom:
    aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css
    aplayer_js: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js
+    meting_js: https://cdn.akioi.eu.org/meting.min.js
-     meting_js: https://cdn1.tianli0.top/npm/js-heo@1.0.12/metingjs/Meting.min.js