记录正在发生的一切

1
<!-- require APlayer -->
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
3
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
4
<!-- require MetingJS -->
5
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
6

7
<style>
8
.aplayer {
9
    background: transparent !important;
10
    border: none !important;
11
}
12
.aplayer .aplayer-info {
13
    border: none !important;
14
    background: rgba(255, 255, 255, 0.2) !important;
15
    backdrop-filter: blur(12px);
16
    padding: 10px !important;
17
    border-radius: 10px;
18
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
19
}
20
.aplayer .aplayer-list {
21
    background: rgba(255, 255, 255, 0.2) !important;
22
    backdrop-filter: blur(12px);
23
    border-radius: 10px;
24
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
25
}
26
.aplayer .aplayer-list ol li {
27
    border: none !important;
28
    color: #000 !important;
29
}
30
.aplayer .aplayer-list ol li:hover {
31
    background: rgba(255, 255, 255, 0.3) !important;
32
}
33
.aplayer .aplayer-list ol li.aplayer-list-light {
34
    background: rgba(255, 255, 255, 0.4) !important;
35
}
36
/* 添加以下样式来处理灰色背景 */
37
.aplayer.aplayer-fixed {
38
    background: transparent !important;
39
}
40
.aplayer.aplayer-fixed .aplayer-body {
41
    background: transparent !important;
42
}
43
.aplayer.aplayer-fixed .aplayer-miniswitcher {
44
    background: rgba(255, 255, 255, 0.2) !important;
45
    backdrop-filter: blur(12px);
46
    box-shadow: -2px 0 6px rgba(255, 255, 255, 0.1);
47
}
48
.aplayer .aplayer-lrc {
49
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
50
    background: transparent !important;
51
}
52
.aplayer .aplayer-lrc:before,
53
.aplayer .aplayer-lrc:after {
54
    background: transparent !important;
55
}
56
/* 添加一些额外的样式优化 */
57
.aplayer .aplayer-info .aplayer-music {
58
    color: #000 !important;
59
}
60
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
61
    color: #000 !important;
62
}
63
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
64
    background: rgba(255, 255, 255, 0.4) !important;
65
}
66

67
/* 添加按钮样式 */
68
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
69
    background: rgba(255, 255, 255, 0.8) !important;
70
}
71

72
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
73
    background: #fff !important;
74
}
75

76
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
77
    border-color: rgb(229, 231, 235) !important;
78
}
79

80
/* 播放按钮样式 */
81
.aplayer .aplayer-info .aplayer-controller .aplayer-play-icon {
82
    border: 2px solid #fff !important;
83
    border-radius: 50%;
84
}
85

86
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
87
    border-color: #fff !important;
88
}
89

90
/* 进度条底色 */
91
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
92
    border-bottom: 1px solid rgb(229, 231, 235) !important;
93
    background: rgba(255, 255, 255, 0.2) !important;
94
}
95

96
/* 音量条样式 */
97
.aplayer .aplayer-volume-bar-wrap .aplayer-volume-bar {
98
    border-bottom: 1px solid rgb(229, 231, 235) !important;
99
    background: rgba(255, 255, 255, 0.2) !important;
100
}
101

102
.aplayer .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
103
    background: #fff !important;
104
}
105

106
/* 按钮悬停效果 */
107
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover {
108
    border-color: #fff !important;
109
}
110
</style>
111

112
<meting-js
113
    server="netease"
114
    type="playlist"
115
    id="7641592364"
116
    fixed="true"
117
    autoplay="false"
118
    theme="#2980b9"
119
    loop="all"
120
    order="random"
121
    preload="auto"
122
    volume="0.7">
123
</meting-js>

1
music_player:
2
  enable: true
3
  type: aplayer
4
  source: netease
5
  id: 7641592364

1
<%- partial('_partial/scripts/meting') %>