看板娘合并音乐播放器

相信不少小伙伴的博客都集成了音乐播放器和 Live2D 看板娘，但是会出现一个问题，看板娘和音乐播放器都在左下角，相互遮盖且很占地方，一点也不美观。所以如果可以把音乐播放器集成到看板娘里，既美观又增加了看板娘的功能。

然而一介小白只是心有余而力不足，幸运的是我偶然发现了这位大佬：鸦鸦

wordpress 插入跳转链接

写出跳转链接的文本，然后选中文本，点击上方的链接，填写链接的网址即可

实现

具体做法就是在宠物的工具栏添加一个 <span class="fa fa-lg fa-music"></span> 音乐图标，控制音乐的播放和暂停，隐藏其他累赘的界面。这可以通过 APlayer 提供的 API 接口做到。切换播放 / 暂停的函数为 xxx.toggle();

但是为了功能的完整性我在宠物的右键菜单里保留了显示 / 隐藏音乐播放器界面的功能按钮。这可以通过增加 / 删除类名做到。相关函数为 xxx.addClass(); 和 xxx.removeClass();

虽然隐藏了播放器界面，但是显示歌词还是不错的。因此需要为播放 / 暂停事件添加事件绑定。当音乐开始播放时自动显示歌词，当音乐停止时自动隐藏歌词。好在 APlayer 依然提供了此编程接口。相关函数为 xxx.on(event, function);

页尾脚本一共需要添加这些东西：

<!--宠物播放器-->
<script>const live2d_path = "https://cdn.jsdelivr.net/gh/crowya/live2d/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("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/waifu.min.css", "css"),
		loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/live2d.min.js", "js"),
		loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/waifu-tips.min.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>