https://simple9656.github.io/js/music_card.js

1// 1. 动态加载 APlayer 的 CSS
2var link = document.createElement('link');
3link.rel = 'stylesheet';
4link.type = 'text/css';
5link.href = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css';
6document.head.appendChild(link);
7
8// 2. 动态加载 APlayer 的 JS
9var script = document.createElement('script');
10script.type = 'text/javascript';
11script.src = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js';
12document.head.appendChild(script);
13
14// 3. 注入样式 (手机端隐藏 + 进度条修复)
15var style = document.createElement('style');
16style.innerHTML = `
17    /* === 手机端完全隐藏 === */
18    @media (max-width: 768px) {
19        #aplayer-fixed {
20            display: none !important;
21            visibility: hidden !important;
22        }
23    }
24
25    /* === 电脑端样式 === */
26    #aplayer-fixed {
27        position: fixed;
28        bottom: 20px;
29        left: 20px;
30        width: 340px;
31        z-index: 99999;
32        background: #fff;
33        border-radius: 6px;
34        box-shadow: 0 2px 15px rgba(0,0,0,0.2);
35        font-family: -apple-system, Arial, sans-serif;
36    }
37
38    #aplayer-fixed .aplayer-pic {
39        cursor: move !important;
40        z-index: 11 !important;
41    }
42
43    #aplayer-fixed .aplayer-lrc {
44        pointer-events: none !important;
45    }
46
47    /* === 修复进度条点击问题 === */
48    #aplayer-fixed .aplayer-info {
49        z-index: 12 !important;
50        position: relative !important;
51        overflow: visible !important; 
52    }
53
54    #aplayer-fixed .aplayer-bar-wrap {
55        z-index: 20 !important;
56        position: relative !important;
57        cursor: pointer !important;
58        pointer-events: auto !important;
59        padding: 10px 0 !important;
60    }
61
62    #aplayer-fixed .aplayer-list {
63        z-index: 1 !important;
64    }
65`;
66document.head.appendChild(style);
67
68script.onload = function() {
69    // 手机端直接不初始化，节省资源
70    if (window.innerWidth <= 768) return;
71
72    var apDiv = document.createElement('div');
73    apDiv.id = 'aplayer-fixed';
74    document.body.appendChild(apDiv);
75
76    const ap = new APlayer({
77        container: document.getElementById('aplayer-fixed'),
78        fixed: false,      
79        autoplay: false,
80        theme: '#FADFA3',
81        loop: 'all',
82        order: 'list',
83        preload: 'auto',

84        listFolded: false, 
85        listMaxHeight: 90, 
86        lrcType: 1,        
87        audio: [
88            {
89                name: 'luv u 2',
90                artist: 'Seto',
91                url: '/music/luvu2.mp3',
92                cover: '/music/cover.jpg',
93                lrc: '[00:00.00]luv u 2\n[00:05.00]Seto'
94            },
95            {
96                name: '浆果',
97                artist: 'TINY7',
98                url: '/music/berry.mp3',
99                cover: '/music/cover.jpg',
100                lrc: '[00:00.00]浆果\n[00:05.00]TINY7'
101            },
102            {
103                name: 'Re0 ED',
104                artist: 'MYTH & ROID',
105                url: '/music/Re0.mp3',
106                cover: '/music/cover.jpg',
107                lrc: '[00:00.00]Re0 ED\n[00:05.00]MYTH & ROID'
108            },
109            {
110                name: 'Mr. Broken Heart',
111                artist: '松下優也',
112                url: '/music/Mr. Broken Heart.mp3',
113                cover: '/music/cover.jpg',
114                lrc: '[00:00.00]Mr. Broken Heart\n[00:05.00]松下優也'
115            },
116            {
117                name: '茫',
118                artist: '李润祺',
119                url: '/music/茫.mp3',
120                cover: '/music/cover.jpg',
121                lrc: '[00:00.00]茫\n[00:05.00]李润祺'
122            },
123            {
124                name: '暗叫',
125                artist: 'きくお',
126                url: '/music/暗叫.mp3',
127                cover: '/music/cover.jpg',
128                lrc: '[00:00.00]暗叫\n[00:05.00]きくお'
129            },
130            {
131                name: 'Merry Christmas Mr. Lawrence',
132                artist: '坂本龍一',
133                url: '/music/Merry Christmas Mr. Lawrence.mp3',
134                cover: '/music/cover.jpg',
135                lrc: '[00:00.00]Merry Christmas Mr. Lawrence\n[00:05.00]坂本龍一'
136            },
137            {
138                name: 'The Last String',
139                artist: 'Jacoo; Oneira',
140                url: '/music/The Last String.mp3',
141                cover: '/music/cover.jpg',
142                lrc: '[00:00.00]The Last String\n[00:05.00]Jacoo; Oneira'
143            },
144            {
145                name: 'this is what winter feels like',
146                artist: 'JVKE',
147                url: '/music/this is what winter feels like.mp3',
148                cover: '/music/cover.jpg',
149                lrc: '[00:00.00]this is what winter feels like\n[00:05.00]JVKE'
150            },         
151            {
152                name: 'Ethereal',
153                artist: 'txmy',
154                url: '/music/Ethereal.mp3',
155                cover: '/music/cover.jpg',
156                lrc: '[00:00.00]Ethereal\n[00:05.00]txmy'
157            },
158            {
159                name: 'Red Moon',
160                artist: 'Chill5',
161                url: '/music/Red Moon.mp3',
162                cover: '/music/cover.jpg',
163                lrc: '[00:00.00]Red Moon\n[00:05.00]Chill5'
164            },
165            {
166                name: 'Sweetly',
167                artist: 'Lord Kael',
168                url: '/music/Sweetly.mp3',
169                cover: '/music/cover.jpg',
170                lrc: '[00:00.00]Sweetly\n[00:05.00]Lord Kael'
171            },
172            {
173                name: 'Phone Kisses',
174                artist: 'suhmeduh',
175                url: '/music/Phone Kisses.mp3',
176                cover: '/music/cover.jpg',
177                lrc: '[00:00.00]Phone Kisses\n[00:05.00]suhmeduh'
178            },
179            {
180                name: '雨夹雪',
181                artist: 'seto',
182                url: '/music/雨夹雪.mp3',
183                cover: '/music/cover.jpg',
184                lrc: '[00:00.00]雨夹雪\n[00:05.00]seto'
185            }
186        ]
187    });
188
189    // === 拖拽功能 ===
190    const player = document.getElementById('aplayer-fixed');
191    const handle = player.querySelector('.aplayer-pic');
192  
193    let isDragging = false;
194    let hasMoved = false;
195    let startX, startY, initLeft, initTop;
196
197    handle.addEventListener('mousedown', (e) => {
198        if (e.button !== 0) return;
199        isDragging = true;
200        hasMoved = false;

201        startX = e.clientX;
202        startY = e.clientY;
203        const rect = player.getBoundingClientRect();
204        initLeft = rect.left;
205        initTop = rect.top;
206        // 重置定位
207        player.style.bottom = 'auto'; 
208        player.style.right = 'auto';
209        player.style.left = initLeft + 'px';
210        player.style.top = initTop + 'px';
211    });
212
213    document.addEventListener('mousemove', (e) => {
214        if (!isDragging) return;
215        const dx = e.clientX - startX;
216        const dy = e.clientY - startY;
217        if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
218            hasMoved = true;
219            player.style.left = (initLeft + dx) + 'px';
220            player.style.top = (initTop + dy) + 'px';
221        }
222    });
223
224    document.addEventListener('mouseup', () => {
225        isDragging = false;
226    });
227
228    handle.addEventListener('click', (e) => {
229        if (hasMoved) {
230            e.stopImmediatePropagation();
231            e.preventDefault();
232            hasMoved = false;
233        }
234    }, true);
235};