「开发：乐谱注入」

开发：乐谱注入

2021/09/20 字数统计： 1.1k 阅读时间： 2 mins 访问次数： ... 评论统计： ...

　　重生之我又在禁绝幻想打白占之因为下本忘关 BGM 导致满脑子啊——→啊——↗↘啊↗啊↘啊↗啊↘甚至做梦都在躲飞翎雨以致睡了四个小时就醒了起来头昏脑涨但还是身残志坚地坐到了电脑前开始写代码。

设计思路

　　其实前两天在发不归之声的时候已经实现基本功能了，只不过实现的方式不太优雅，我直接把整个 svg 文件的代码复制出来然后 var 了一个变量【
　　然后因为用算法精简了的缘故音符之间都黏在了一起变得不太能交互，想着这样不行还是要想办法直接用 JS 读取 svg 再作为字符串导入……
　　大体上是实现了，但是 musescore 导出的 svg 还是不太符合我的标准，我原本以为它能自带一些 musicXML 的特性 ex 保留音名记号，结果只是单纯的蝌蚪，如果想要标注的话还是需要进一步开发……

实施：乐谱导入

html 部分

<div id="score">
	loading 
	<span id="score-name">
		(filename)
	</span>
	 ...
</div>

　　应该算是挺直观的一个格式，之后看看能不能直接写进模板……然后如果乐谱没有加载出来的话就会显示 loading (filename) ... 加载完毕后会直接覆盖掉 div 中的文字内容。

JS 部分

　　又名 re：从 0 开始的 jQuery 学习生活【不是
　　其实实现起来也就几行字，主要是我花了很多时间来解决什么是 ajax 和 jQuery 的基本语法问题，而且主要问题其实也不是我自己解决的，是馒头帮我解决的【

var scoreURL = '/score/' + $("#score-name").text() + '.svg';
// 获取 id="score-name" 元素中写入的内容，并拼接成所需要的图片链接
$.ajax({
  type: 'get',
  url: scoreURL,
  dataType: 'text',
// 使用 ajax 通过连接获取 svg 并转换成文本
success: function(data) {
    $('#score').html(data);
// 查找 id="score" 的元素，并将其中的内容替换成 svg 文本
  }
});

　　从缩进格式就能一眼看出不是我自己写的代码呢！（只写了第一行）
　　其实我感觉这第一行也可以直接写在下面那个括号里，但是我对 JS 和 jQuery 的掌握程度就好像对日文和法语的掌握程度差别那么大，能跑就行了，我实在是不想再改了【

计划：演奏教学

img-right

　　是说我有尝试做简谱标注，然而实施出来的效果是这样的→
　　虽然有现成的插件可以直接用，只要调一下字体就行，但是这玩意的可读性难道真的会比五线谱高吗，我完全不觉得……
　　想起当年我辛辛苦苦手动给人挨个标好音名然后对方冷冰冰地甩给我一句「看不懂，我只会简谱」，也一时不知道该骂谁是啥比比较好【手动流汗黄豆
　　但是 musescore 的插件看起来长得好像和 JS 差不多，或许我可以自己魔改一下整个键位标注版的？
　　其实还是很纠结，首先五线谱标这一堆玩意实在是称不上好看，如果直接把标注文字截出来时值的显示又会成问题，可能比起捣鼓乐谱还是录个键盘教学比较有效果……以及标简谱数字可读性成迷，标键位又并不能帮助识谱，我个人还是觉得至少在键盘乐器演奏上五线谱的识别效率还是远高于简谱的，这个时候就又要痛骂中国音乐教育了【

　　说起来我为什么不直接转成 Lilypond 源码呢……我觉得那玩意都比这个可读性高吧，唯一的问题就是它两个声部是分段的，那我直接写个 css 做两列对照不就得了？

無色人間。