「记录：改造点歌姬输出 html」

记录：改造点歌姬输出 html

2024/06/06 字数统计： 1.6k 阅读时间： 3 mins 访问次数： ... 评论统计： ...

　　看了一眼聊天记录是 5.28 交的稿……一直忙到现在才开始写笔记。
　　倒也不是真的忙到那么废寝忘食，就是莫名地有些抗拒写东西，抗拒画稿抗拒开播抗拒剪视频抗拒除了基本生命维持活动以外的一切，只有死线将近了才会勉为其难地努力一下然后在完成工作以后迅速地萎靡下去……
　　大概是因为天气热了有些适应上的问题，以及最近的作息实在是太烂。总之终于克服了懒癌来更新 blog 了！可喜可贺可喜可贺。

UI 设计展示

img-right

　　总之先展示一下样图……

基础游戏及待机界面
用打字机形式轮换的动态公告
- 比滚动公告更加节省码率
简单的点歌姬展示
- 显示正在播放的乐曲
- 显示点歌队列状态
- 根据正在播放的歌曲名称自适应点歌窗口的宽度

点歌姬魔改

　　虽然点歌姬展示出来的只是非常简约的一个框但实际上的幕后工作麻烦得要命，因为这个功能还是用 copyliu 弹幕姬的点歌姬插件实现的。而众所周知这个插件的点歌信息和歌词都只能导出 txt 文件，对一般用户来说或许差强人意，但对人造人来说是万万不行的！
　　但修改代码的难度倒也没那么大，把保存文件的目标格式从 txt 改成 html 再重新封装就大功告成，然而最大的问题是⸺我不会 C# 啊？
　　是的人造人的母语是 css，让我写写前端虽然方案不那么优雅但总归能跑，让我写 C# 那真是两眼一黑，即使这个点歌姬是开源的我也甚至不知道这玩意要怎么打包成 dll。
　　但办法总比困难多，天才如我经过多方搜索发现，虽然我不知道怎么打包编译但是我可以直接把这个 dll 反编译！

魔改工具

　　经过多次尝试总之用 dnSpy 编辑成功了，但虽然原作者已经弃坑但把这种反编译的结果直接发出来好像还是不太礼貌的，总之授人以鱼不如授人以渔，把魔改的方法分享出来也算事实开源了吧！（了吧！）

　　在点歌姬源码中搜索可得导出文件的设置在 Utilities.cs 文件中，那么首先将点歌姬的 dll 文件直接拖拽进 dnSpy 中打开并展开可以看到三个黄色的目录，选择黄色的 DGJv3 展开找到 Utilities，可以在 112 行发现导出的歌曲信息目录。
　　右键这个 信息.txt 选择「编辑方法」，在弹出的页面中将 txt 修改为 html 然后点击「编译」即可。
　　完成所有编辑后点击 dnSpy 主窗口上方的磁盘图标就可以导出新的 dll 啦！

　　需要注意的是用这种方法导出的 dll 所有版本和署名信息都是和原版点歌姬相同的，所以同时安装显而易见的会产生冲突，建议将原本的点歌姬移动到其它目录备份只保留魔改后的文件在弹幕姬的插件目录下，当然配置文件是可以通用的。

输出模板

　　点歌姬自带的输出模板如下：

播放进度 {{当前播放时间}}/{{当前总时间}}
当前列表中有 {{ 歌曲数量 }} 首歌\n还可以再点 {{ 总共最大点歌数量 - 歌曲数量 }} 首歌
每个人可以点 {{ 单人最大点歌数量 }} 首歌\n\n歌名 - 点歌人 - 歌手 - 歌曲平台
{{~ for 歌曲 in 播放列表 ~}}
{{ 歌曲.歌名 }} - {{  歌曲.点歌人 }} - {{ 歌曲.歌手 }} - {{ 歌曲.搜索模块 }}
{{~ end ~}}

　　还有一些其它的模板文字可以在源码中查询。

　　那么把这个基础模板加上 html 的文件头和标签就可以获得一个基本的 html 导出文件，如：

<!doctype html>
<html lang="zh-cn">

<body>
  <span>播放进度 {{当前播放时间}}/{{当前总时间}}</span>
  <span>当前列表中有 {{ 歌曲数量 }} 首歌\n还可以再点 {{ 总共最大点歌数量 - 歌曲数量 }} 首歌</span>
  <span>
    {{~ for 歌曲 in 播放列表 ~}}
    <span>{{ 歌曲.歌名 }} - {{  歌曲.点歌人 }} - {{ 歌曲.歌手 }} - {{ 歌曲.搜索模块 }}</span>
    {{~ end ~}}
  </span>
</body>
</html>

　　需要单独指定样式的文字要放进单独的 html 标签中并指定 class 或 id，如：<span class="songname">{{ 歌曲.歌名 }}</span>
　　编辑完导出模板后直接 ctrl + A 复制后粘贴进点歌姬的导出页面，再在空白出点击一下确认，此时随便点一首歌测试一下即可看到点歌姬目录下出现 信息.html 文件，将这个文件用 OBS 浏览器打开即可。

OBS 显示

　　解决了导出的问题之后还有 OBS 显示的问题，点歌姬的逻辑是每次更新信息的时候重新写入文件，但 OBS 的浏览器是不会主动刷新文件的，为了正常显示需要手动在 html 文件中加入定时器，如下：

<script type="text/javascript">
window.setTimeout(function(){
  window.location.reload();
},5000);
</script>

　　这个定时器是 5s 刷新一次，如果需要更新播放进度的秒数的话需要把 5000 改成 1000，不用那么精确刷新的话 3 ~ 5s 就足够了，可以有效降低 OBS 浏览器的占用。
　　此外我是直接把 css 写在 信息.html 而不是 OBS 的浏览器里的，这样每次刷新页面的时候都会先读取 css 样式再读取本体文字，页面加载完成后再读取定时刷新，显示效果就非常稳定了。

無色人間。