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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Card</title><link href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float|fire-animation" rel="stylesheet">
<link href="APlayer.min.css" rel="stylesheet">
</head>
<body>
<h2 class="font-effect-fire-animation">音乐</h2>
<div id="loading">正在加载...</div> <!-- 加载提示 -->
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script>
const loading = document.getElementById('loading'); // 获取加载提示
const ap = new APlayer({
container: document.getElementById('aplayer'),
mini: false,
autoplay: false,
theme: '#FADFA3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: 90,
lrcType: 3,
audio: [
{
name: 'DAY1',
artist: '艾志恒Asen',
url: 'img/艾志恒Asen - DAY1.mp3', // 确保这是音频文件的正确路径
cover: 'https://p3.music.126.net/3aBXGrdY0P4dJMbzpCbICg==/109951165439123871.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/DAY1 - 艾志恒Asen.lrc', // 确保这是歌词文件的正确路径
theme: 'black'
},
{
name: '富士山下',
artist: '陈奕迅',
url: 'img/陈奕迅 - 富士山下.mp3', // 确保这是音频文件的正确路径
cover: 'https://p1.music.126.net/jzNxBp5DCER2_aKGsXeRww==/109951167435823724.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0', // 确保这是封面图片的正确路径
lrc: 'lrc/富士山下 - 陈奕迅.lrc', // 确保这是歌词文件的正确路径
theme: '#7C3516'
},
{
name: '最好的我',
artist: '房祖名,龚芝怡',
url: 'img/房祖名,龚芝怡 - 最好的我.mp3', // 确保这是音频文件的正确路径
cover: 'https://p4.music.126.net/5iM3nVTJHpAPJetxLiIdig==/109951169664174099.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/最好的我 - 房祖名,龚芝怡.lrc', // 确保这是歌词文件的正确路径
theme: '#FFFFFF'
},
{
name: '林俊杰 - 可惜没如果',
artist: '林俊杰',
url: 'img/林俊杰 - 可惜没如果.mp3', // 确保这是音频文件的正确路径
cover: 'https://p4.music.126.net/QXZRckFTN5375vdQSyG0jA==/109951166919095160.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/可惜没如果 - 林俊杰.lrc', // 确保这是歌词文件的正确路径
theme: '#D6B9A6'
}, {
name: '曼陀罗华',
artist: 'Sasuke',
url: 'img/Sasuke - 曼陀罗华.mp3', // 确保这是音频文件的正确路径
cover: 'http://8.148.27.163:3000/img/logo/avatar.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/曼陀罗华 - Sasuke.lrc', // 确保这是歌词文件的正确路径
theme: '#2D699F'
},
{
name: '明天 (feat. 袁娅维TIA RAY)',
artist: '马思唯,袁娅维TIA RAY',
url: 'img/马思唯,袁娅维TIA RAY - 明天 (feat. 袁娅维TIA RAY).mp3', // 确保这是音频文件的正确路径
cover: 'https://p4.music.126.net/rYPlv-TJno4hbxEMT7se1Q==/109951168520849181.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/明天 (feat. 袁娅维TIA RAY) - 马思唯,袁娅维TIA RAY.lrc', // 确保这是歌词文件的正确路径
theme: '#E79739'
}, {
name: '主角《斗破苍穹》动画第四季片尾曲',
artist: '沉画文阁',
url: 'img/沉画文阁,马里奥,曲杨 - 主角《斗破苍穹》动画第四季片尾曲.mp3', // 确保这是音频文件的正确路径
cover: ' https://p4.music.126.net/GydBHMkoBHmIAszwTmixVg==/109951169632692426.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/主角《斗破苍穹》动画第四季片尾曲 - 沉画文阁,马里奥,曲杨,draceana.lrc', // 确保这是歌词文件的正确路径
theme: '#9A9DEE'
},{
name: '匿名的好友',
artist: '小包Zerinn',
url: 'img/小包Zerinn - 匿名的好友.mp3', // 确保这是音频文件的正确路径
cover: 'https://p4.music.126.net/Q5cpk7hfluzsQziMKHXuDw==/109951169538226294.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/匿名的好友 - 小包Zerinn.lrc', // 确保这是歌词文件的正确路径
theme: '#E6BBE4'
},{
name: '匿名的好友',
artist: '小包Zerinn',
url: 'img/小包Zerinn - 匿名的好友.mp3', // 确保这是音频文件的正确路径
cover: 'https://p4.music.126.net/Q5cpk7hfluzsQziMKHXuDw==/109951169538226294.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/匿名的好友 - 小包Zerinn.lrc', // 确保这是歌词文件的正确路径
theme: '#E6BBE4'
},{
name: '找自己',
artist: '陶喆',
url: 'img/陶喆 - 找自己.mp3', // 确保这是音频文件的正确路径
cover: 'https://p4.music.126.net/tMQXBMTy8pGjGggX1j0YNQ==/109951169389595068.jpg', // 确保这是封面图片的正确路径
lrc: 'lrc/找自己 - 陶喆.lrc', // 确保这是歌词文件的正确路径
theme: '#ECCF12'
}
]
});
// 隐藏加载提示
loading.style.display = 'none';
let i = 1;
setInterval(function() {
const bg = document.getElementById('bg');
bg.classList.add('fade-out');
setTimeout(() => {
bg.src = "img/" + (i % 4 + 1) + ".jpg";
i++;
bg.classList.remove('fade-out');
}, 1000);
}, 2000);
</script>
</body>
</html>
|
