Live2D 宠物功能修改|音乐播放器+右键秘密通道

显示效果如图：

思路说明

音乐播放器是基于 APlayer 和 MetingJS。

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

播放器默认固定在网页的左下角，但是这样太占地方了，于是我把它和 Live2D 宠物集成到一起了。

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

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

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

快速复现指南

页尾脚本一共需要添加这些东西：（2023 年 12 月 16 日更新）

PS：如果主题有插入代码插件或者功能，可以直接在页脚代码处插入以下代码：

比如corenext主题可以直接在 主题设置-插入代码-页脚代码 处插入

如果主题自带了 font awesome 可以把第一行代码删除<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

<!--宠物播放器-->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script>const live2d_path = "https://cdn.jsdelivr.net/gh/watlam/live2d/live2d/";</script>
<meting-js server="netease" type="playlist" id="7376437138" 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/watlam/live2d/live2d/waifu.min.css", "css"),
        loadExternalResource("https://cdn.jsdelivr.net/gh/watlam/live2d/live2d/live2d.min.js", "js"),
        loadExternalResource("https://cdn.jsdelivr.net/gh/watlam/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>

如需改为自己的歌单，请修改 <meting-js> 标签内的参数。

如需修改秘密通道或对话文本，请自定义 waifu-tips.json，详情参阅我的 GitHub。

本文教程来自鸦鸦：原文链接为 https://crowya.com/1088