Live2D 宠物功能修改|音乐播放器+右键秘密通道
本文最后更新于 956 天前,如果内容失效欢迎留言告知。

去掉多余按钮

注释掉按钮标签及其相应函数即可。

<span class="fa fa-lg fa-comment"></span>
<!--span class="fa fa-lg fa-paper-plane"></span-->
<span class="fa fa-lg fa-user-circle"></span>
<!--span class="fa fa-lg fa-street-view"></span-->
<span class="fa fa-lg fa-camera-retro"></span>
<!--span class="fa fa-lg fa-info-circle"></span-->
<span class="fa fa-lg fa-times"></span>

右键秘密通道

修改新加的函数一定要写在function initModel()这个函数下!!!否则没用!!!网址记得改成自己的。(其他位置没有详细测试,反正单独写在外面是不行的。)

$("#live2d").mousedown(function(e) {
	if(e.which==3){
	showMessage("<div style=\"text-align:center\">秘密通道<br/><a class=\"fa fa-wordpress\" href=\"https://crowya.com/yayawplogin\" title=\"后台\" target=\"_blank\"> WordPress</a><br/><a href=\"http://101.133.211.86:1999/yayabt/\" title=\"宝塔\" target=\"_blank\">宝塔面板</a></div>",4000,10);
	}
});
$("#live2d").bind("contextmenu", function(e) {
	return false;
});

集成音乐播放器

依赖于APlayerMetingJS

其中APlayer用于生成一个播放器,MetingJS用于连接网易云等API接口,获取歌词、图像等。(大概是这样吧。)

如果使用CDN的话,不需要安装任何文件。

在页尾脚本输入以下代码:

<!--音乐播放器-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js id="451954632" server="netease" type="playlist" theme="#339981" fixed="true"
preload="auto" autoplay="false" loop="all" order="random" volume="0.3"></meting-js>

到这里一个基本的播放器就生成了。

注意修改<meting-js>标签内的参数。

其中id是歌单的ID,从网页版网易云地址栏最后的数字可以看到。

其他参数详见项目文档

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

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

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

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

不过令人糟心的一点是APlayer初始化完成时默认打开了歌词。本来通过修改CSS是比较容易改变这一点的,但是为了使用CDN,就不能修改引用的资源了。

一个很自然的思路就是在页尾脚本中加上一句歌词隐藏函数xxx.lrc.hide();然而这句话并没有执行。一番苦思冥想后我认为大概是由于当执行到这句话的时候元素还没加载完成,因而这句话就无效了。

加入一个延时5秒函数setTimeout(function(){……},5000)后隐藏歌词果然成功执行。但歌词还是会显示一段时间再关闭,并不完美。

然而使用页面加载完再执行的函数window.onload=function(){}却无效。这个被广泛视为万能的宝贝函数在我这儿居然不起作用!?也许歌词、封面等的加载不在元素加载的范畴?虽然我到现在依然不求甚解,但是折腾还得继续……

就在我几乎要绝望的时候,偶然间看到了DOMNodeInserted监听事件,试了一下居然真的有效!也不管什么这个属性可能即将被新的标准移除之类耸人听闻的话,作为业余瞎折腾爱好者够用就行了……虽然依然用了延时函数,但一开始歌词就不会显示,比我上一种方法效果好了一点。主要问题在于这个监听事件如果一直存在的话即使手动打开歌词也会被马上屏蔽,所以需要5秒后移除监听事件……就这样吧,折腾不动了。

下面直接上代码。

值得注意的是其中<a href=\"javascript:aplayer_panel_toggle();\">音乐播放器</a>的写法。我不知道这种写法符不符合规范,反正我用着相当有效。

为方便食用,提供一个修改好的waifu-tips.js。但其中的网址链接还需自己修改。

链接: https://pan.baidu.com/s/10geEloZkMp9PJ2Nav18Dow 提取码: crow

最后还需要在主题-自定义-额外CSS中加入以下内容:

.my-hide{
	display:none !important;
}
.zero-margin-bottom{
	margin-bottom:0 !important;
}

最后的最后,给音乐按钮增加自定义对话。

"selector": "#waifu-tool .fa-music",
"text": ["想听音乐吗?","从今天起,做个有音乐细胞的喵星人。","悄咪咪地告诉你,这里有鸦鸦喜欢的音乐~","你确定要点吗?我听得耳朵都生茧了。","你会唱《学猫叫》吗?","我们一起学猫叫~<br>一起喵喵喵喵喵~","不得不说,鸦鸦的音乐品味真是一言难尽……"]
小提示:您可以通过 RSS 订阅本站文章更新,订阅地址:https://crowya.com/feed。什么是 RSS ?

评论

  1. Bensz
    Windows Chrome
    8月前
    2022-4-15 16:15:34

    根据这两天的测试,按您的流程是没有办法复现宠物音乐相关的效果的。您应该还进行了其它的设置( ̄△ ̄;)。不过另外一篇显示宠物的教程是可以复现的。

  2. Bensz
    Windows Chrome
    8月前
    2022-4-13 21:54:07

    按大佬的流程很是顺利,只是Github仓库的CDN有点久

  3. Bensz
    Windows Chrome
    8月前
    2022-4-13 15:24:05

    大佬的技术恐怖如斯(~ ̄▽ ̄)~

  4. Windows Chrome
    3年前
    2020-4-20 16:14:21

    比我的黑猫丝滑

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇