CoreNext主题美化_Live2D 宠物

思路说明

音乐播放器是基于 APlayer 和 MetingJS。其中 APlayer 用于生成一个播放器，MetingJS 用于获取 QQ 音乐、网易云的歌单列表和资源。

显示效果如图：

所需文件

CoreNext主题美化_Live2D 宠物

来源：123盘 | 提取码:YziO

立即下载

下载完成，放到自己服务器上

使用方法

1.把下载好的压缩包放到/www/wwwroot/wordpress（自己的网站）/wp-content/uploads/

2.解压其压缩包，提取live2d文件夹，把live2d文件夹放到uploads文件夹下

3.页尾脚本一共需要添加这些东西:( live2d path 换成自己的链接)

<!--宠物播放器-->
<script>const live2d_path = "https://xxxx（换成自己网站链接）/wp-content/uploads/live2d/";</script>
<meting-js server="tencent" type="playlist" id="8559460487" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" order="random" volume="0.3"></meting-js>
<script>
//封装异步加载资源的方法
function loadExternalResource(url, type) {
	return new Promise((resolve, reject) => {
		let tag;
		if (type === "css") {
			tag = document.createElement("link");
			tag.rel = "stylesheet";
			tag.href = url;
		}
		else if (type === "js") {
			tag = document.createElement("script");
			tag.src = url;
		}
		if (tag) {
			tag.onload = () => resolve(url);
			tag.onerror = () => reject(url);
			document.head.appendChild(tag);
		}
	});
}

if (screen.width >= 768) {
	Promise.all([
		loadExternalResource(live2d_path + "waifu.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js"),
		loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
		loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
	]).then(() => {
		loadExternalResource("https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js", "js");
	});
	ap = null;
	Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
		set: function(aplayer) {
        		ap = aplayer;
        		ap_init();
        		initWidget();
		}
	});
}
</script>

参考

煜轩一言

鸦鸦的巢穴