還ラナイ声 / ギター
2021/09/17 字数统计： 1.9k 阅读时间： 3 mins 访问次数： ... 评论统计： ... 一些因为乐谱渲染而心力交瘁的随行支援系统……
总之最后还是决定直接导出 svg 放上来了，看了一下说一些 svg 的导入标签可以执行脚本，虽然暂时没有这个需求，但至少从这个方向走下去不至于全部推倒重来。
乐谱：還ラナイ声 / ギター
歌词
Foe ton fleur ni say
Ah loera sonsa pri
Mee yeur con trafi
Stray lue swanshu tie sa
Saru mena shay
Ei blon doe con jaflui
Con roete masie
Plue sae kree melanu sie ei
Esiley apar corun
Lon tunie iyat tormo
Fialu setana pree cu blure torali
Con tramue sorati
Con trala suephra la conte
Con tie yer peur lay
Ah feno mon poelay
Con gachat tasue
Qua tu nisa mumay
Qua tue laseuh
See lafeu reson tue
Mee ata shigay
Plues ka sa ju trajun sie ei fwee
日志：乐谱展示功能开发
总之折腾了两天总算是放上来了，虽然只有五线谱没有演奏教学……
是说演奏教学的形式还没有设计好，大概还是要写成简谱比较易读，简谱渲染的轮子确实是只能自己写了，我就没找到几个能看的，而且这个应该没有五线谱那么复杂……但愿……
方案 1：lilypond
一开始我是想得挺美的，我以为有现成的轮子可以在网页上直接把 lilypond 代码渲染成乐谱，我只要拖几个 JS 外链再写几行 layout 就能美美地把五线谱放上来了，然后魔改一下还能显示简谱和自定义游戏键位打小抄。
可谁能想到，家人们，这实在是太难啦！！！【根导.mp3
先是搜索 lilypond JS，无事发生，在日文官网上找了半天找到两个在线编辑器：hacklily 和 LilyBin，然后一个三年没更新另一个六年没更新了……大致看了一下代码似乎没法纯前端实现，而且音符全部是用脚本计算坐标绝对定位的，最重要的一点是运行速度是真的非常感人。然后我把 musescore 里打好的谱子转成 lilypond 在本地渲染了一下，60 个小节的谱子耗时 5.4s，呃……那么根据我现有的代码知识，只能判断这个上世纪的渲染引擎可能不太适合现代互联网了……
方案 2：hexo 渲染器
放弃了 lilypond 我开始直接搜索 hexo music sheet，还真让我找到一个轮子：hexo-musicxml-sheetmusic
大概看了一下文档没放示例页面但是渲染图上看效果挺 emmmm 的，另外依赖库列表也非常劝退，以及作者自己也表示该插件正处在开发阶段，各项功能均不稳定。
最主要的是我仔细研究了一下 musicXML 文件，感觉这个东西实在是不太符合我对代码的审美……【实际上这个东西也本来就是一个导出结果而不是用来输入的字符串，而且讲真的我觉得从这一大串东西里提取出需要的属性再重新写成 svg（我看依赖库它甚至是写成 svg 以后又导出了 pdf？？？）的过程如同把番茄炒蛋里的蛋花挨个挑出来再重新下锅煮成一碗番茄蛋花汤，可以，但是没必要。
方案 3：svg 嵌入
那么这就是最终方案了……
首先吐槽一下 musescore 的 svg 导出，请问矢量图开 2000×6500 的画布你是有什么心理疾病吗？而且这个尺寸居然还不可调整，我直接进行一个藏狐打人.gif
然后是 svg 嵌入标签的问题，musescore 直接输出的 svg 文件大小高达 888k，即使我在 svgomg 上精简了一下也依然有 480k，把这 48w 个字符直接写到 md 文件里显然是不现实的，于是尝试了以下几种方案：
- iframe
- 无法维持 svg 自带的长宽比，这个问题可以用 css 的 aspect-ratio 样式解决
- 与 perfect-scrollbar 不兼容，鼠标停留在上方的时候页面会无法滚动，手机基本别想翻页了【你到底哪里 perfect 了！
- 结论：放弃
- embed
- 同上
- img
- 会被 hexo 主题自带的脚本处理成 PhotoSwipe 需要的格式，并且弹窗默认是黑色背景，点开大图以后啥也看不见
- 我写了太多 css 样式了……
- 结论：放弃
在否决以上三种方案之后我还是选择直接把 svg 元素写进 html 里，但是为了保持 md 文件的整洁，最后是把乐谱写成了一个自动执行的 JS 脚本，在整个页面加载完成以后将 svg 元素写入指定的 div 中。
目前的解决效果而言还是比较满意的，虽然 const 后面赋值的是一串 48w 字的赛博长篇小说，但是它至少不会和任何东西冲突并且还保留了一点点可互动性……虽然真的只有一点点……