如果你不是通过官方的方式引入aplayer,那么建议你先看看这篇文章网页接入aplayer音乐播放器 | butlanys的博客

只需要在aplayer的配置js中改为下面的js

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
const urlParams = new URLSearchParams(window.location.search);
const path = urlParams.get('path') || '/music'; // alist中访客可看到音乐的路径

fetch(`https://alist.hqycloud.top/api/fs/list`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
path: path,
password: '', // 如果用的是访客权限,这里可以为空
page: 1,
per_page: 100, //获取的最大音乐数量,此值可大不可小,否则获取的音乐不全
refresh: false
})
})
.then(response => response.json())
.then(data => {
if (data.code === 200) {
const audioList = data.data.content
.filter(item => !item.is_dir)
.map(item => ({
name: item.name.replace(/\.[^/.]+$/, ""),
url: `https://alist.hqycloud.top/d/onedrive-data${path}/${encodeURIComponent(item.name)}`,
cover: item.thumb // 可选:设置封面图片
}));

const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true,
audio: audioList
});
} else {
console.error('获取音乐列表失败:', data.message);
}
})
.catch(error => {
console.error('获取音乐列表出错:', error);
});