93 lines
No EOL
6.1 KiB
HTML
93 lines
No EOL
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>STARSET Wiki外链播放器</title>
|
||
</head>
|
||
<body>
|
||
<!-- Import APlayer Library-->
|
||
<link rel="stylesheet" href="https://scdn.thestarsetsociety.cn/GeneralLibrary/APlayer/1.10.1/APlayer.min.css">
|
||
<div id="aplayer"></div>
|
||
<script src="https://scdn.thestarsetsociety.cn/GeneralLibrary/APlayer/1.10.1/APlayer.min.js"></script>
|
||
<script src="https://scdn.thestarsetsociety.cn/GeneralLibrary/APlayer/1.10.1/color-thief.js"></script>
|
||
<!-- Import APlayer -->
|
||
<script>
|
||
const ap = new APlayer({
|
||
container: document.getElementById('aplayer'),
|
||
// 这一部分的设置可以保持默认
|
||
//fixed: false, //该与Wiki页面样式冲突，请勿更改。
|
||
autoplay: false, //是否自动播放，是为true，否为false,手机等移动端一般不生效（手机浏览器通常不允许自动播放）
|
||
volume: 0.8, //初始音量（0~1）
|
||
lrcType: 3, //歌词模式（1、HTML模式 2、js模式 3、lrc文件模式）
|
||
mutex: true, //互斥模式：阻止多个播放器同时播放，当前播放器播放时暂停其他播放器（Wiki不生效）
|
||
order: 'list', //音频循环顺序（'list'：顺序, 'random'：随机）
|
||
preload: 'metadata', //预加载（'none'：不预加载, 'metadata'：元数据, 'auto'：自动）
|
||
listFolded: false, //列表默认折叠，开启为true
|
||
theme: '#655dc6', //主题颜色 // HORIZONS官方配色：银河蓝 #1226aa | 气层紫#655dc6 | 流星橙 #ff8d6b | 超新红 #db0032
|
||
// 以上设置可以保持默认，只编辑下面的音频内容
|
||
audio: [{
|
||
name: 'THE BREACH', //歌曲名称
|
||
artist: 'STARSET', //歌曲作者
|
||
url: 'https://music.163.com/song/media/outer/url?id=1888810383.mp3', //歌曲源文件地址
|
||
//如果该歌曲是网易云音乐的免费歌曲，你可以获得这个歌曲的链接，在浏览器中打开后获得这个歌曲的id，随后把上面的'歌曲id'替换为你得到的歌曲id即可
|
||
//示例：https://music.163.com/song/media/outer/url?id=1888810383.mp3
|
||
//如果是VIP歌曲或你自定义的歌曲，请按格式填写好链接后联系CDN上传，格式为：https://scdn.thestarsetsociety.cn/GeneralMedia/Mustrm/歌手名/专辑名/歌曲名.mp3
|
||
//其中，歌手名、专辑名、歌曲名的字母全为小写，如果有空格，以下划线代替
|
||
//示例：https://scdn.thestarsetsociety.cn/GeneralMedia/Mustrm/starset/horizons/the_breach.mp3
|
||
cover: 'https://scdn.thestarsetsociety.cn/GeneralMedia/Muscvr/starset/horizons.webp', //歌曲封面地址
|
||
//你可以用浏览器访问相关专辑，然后右键单击歌曲封面，点击“检查”/“检查元素”就能看到图片地址（显示在“img src=”后面的就是）
|
||
//如果获取不到或你要自定义图片，请按格式填写好后联系CDN上传，格式为https://scdn.thestarsetsociety.cn/GeneralMedia/Muscvr/歌手名/专辑名.webp
|
||
//其中，歌手名、专辑名、歌曲名的字母全为小写，如果有空格，以下划线代替
|
||
//示例：https://scdn.thestarsetsociety.cn/GeneralMedia/Muscvr/starset/horizons.webp
|
||
lrc: 'https://scdn.thestarsetsociety.cn/GeneralMedia/Muslrc/starset/horizons/the_breach.lrc', //歌曲的歌词文件
|
||
//联系CDN上传后，格式应该为：https://scdn.thestarsetsociety.cn/GeneralMedia/Muslrc/歌手名/专辑名/歌曲名.lrc
|
||
//要求和上面一样
|
||
//示例：https://scdn.thestarsetsociety.cn/GeneralMedia/Muslrc/starset/horizons/the_breach.lrc
|
||
//theme: '#eeeeee' //可以单独为某个歌曲设置主题颜色
|
||
},
|
||
{
|
||
name: 'OTHERWORLDLY', //歌曲名称
|
||
artist: 'STARSET', //歌曲作者
|
||
url: 'https://music.163.com/song/media/outer/url?id=1888810384', //歌曲源文件地址
|
||
cover: 'https://scdn.thestarsetsociety.cn/GeneralMedia/Muscvr/starset/horizons.webp', //歌曲封面地址
|
||
lrc: 'https://scdn.thestarsetsociety.cn/GeneralMedia/Muslrc/starset/horizons/otherworldly.lrc', //歌曲的歌词文件
|
||
},
|
||
{
|
||
name: 'ICARUS', //歌曲名称
|
||
artist: 'STARSET', //歌曲作者
|
||
url: 'https://music.163.com/song/media/outer/url?id=1888810385', //歌曲源文件地址
|
||
cover: 'https://scdn.thestarsetsociety.cn/GeneralMedia/Muscvr/starset/horizons.webp', //歌曲封面地址
|
||
lrc: 'https://scdn.thestarsetsociety.cn/GeneralMedia/Muslrc/starset/horizons/icarus.lrc', //歌曲的歌词文件
|
||
}
|
||
//注意，除最后一个花括号{}的后面没有英文逗号外，之前的花括号都应该有英文逗号。
|
||
]
|
||
});
|
||
//如果要启用“根据歌曲封面颜色自动匹配主题颜色”功能，请去掉下面的两行注释符“/*”和“*/”
|
||
/*
|
||
const colorThief = new ColorThief();
|
||
const image = new Image();
|
||
const xhr = new XMLHttpRequest();
|
||
const setTheme = (index) => {
|
||
if (!ap.list.audios[index].theme) {
|
||
xhr.onload = function(){
|
||
let coverUrl = URL.createObjectURL(this.response);
|
||
image.onload = function(){
|
||
let color = colorThief.getColor(image);
|
||
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
|
||
URL.revokeObjectURL(coverUrl)
|
||
};
|
||
image.src = coverUrl;
|
||
}
|
||
xhr.open('GET', ap.list.audios[index].cover, true);
|
||
xhr.responseType = 'blob';
|
||
xhr.send();
|
||
}
|
||
};
|
||
setTheme(ap.list.index);
|
||
ap.on('listswitch', (index) => {
|
||
setTheme(index);
|
||
});
|
||
*/
|
||
</script>
|
||
</body>
|
||
</html> |