五线谱走谱实现方案

应用市场上大部分APP走谱的实现都是通过H5来实现，这种方案总感觉有点差强人意，走谱过程中很多功能都不好展示，例如：五线谱的缩放问题，AB循环播放等等。

1.基础的乐理知识

1.1大谱表

• 什么是大谱表？(钢琴谱一般是用大谱表，移钢琴谱为例子)

  在高音谱表与低音谱表左端用垂直线与花括号连结起来，叫做大谱表。

• 高音谱 和 低音谱

  高音谱：?高音谱号，就是记在五线谱第二线上的G谱号（G clef），指定G音位置的记号，表示谱表中第二线音高为g1，适用于高音区域。(来自百度百科，更加具体内容可以百度搜索)

  低音谱:低音符号是指音乐类的一种符号。高音谱表的下加一线为中央C，而低音谱表的上加一线为中央C，正是这个加线将两种谱表连接起来，这一点很重要。

• 高音谱和低音谱的联系
  

  高音谱表的下加一线为中央C，而低音谱表的上加一线为中央C，正是这个加线将两种谱表连接起来，这一点很重要。

1.2 音符

1.2.1 音符介绍

1.2.2 音符种类简介

如下图，依次为 全音符 二分音符 四分音符 八分音符 十六分音符

音符还有很多种类例如：

• 三十二分音符
• 六十四份音符(很少见)
• 附点音符
• 休止符
• 升降音符等等
• 连音符
• 延音符

等等

1.2.3 音符时长计算

以 4/4拍为例子（4分音符为一拍 一节有4个四分音符）（♩ 为四分音符的图标）

注： 2/4 4分音符为一拍 一节有2个四分音符的时长

一般五线谱左上角会标识节拍和速度 例如 ♩ = 120

标识 一分钟内 120个四分音符 ，即可算出每个音符的时长(0.5s)

假设一个四分音符的时长为 1个单位时长

2.MIDI文件(SMF)转换

2.1 将midi文件转成svg格式的数据

2.1.1 导出SVG格式数据

用打谱软件将midi文件打开,市面上很多打谱软件，有一个开源的 MuseScore 挺好用的将midi文件导出成svg格式的数据，然后解析svg格式的数据，以卡农为例

2.1.2 读取解析SVG格式数据

读取SVG格式的数据,如下

<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" stroke-linejoin="bevel" points="371.078,485.398 2763.78,485.398"/>
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" stroke-linejoin="bevel" points="371.078,646.598 2763.78,646.598"/>
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" stroke-linejoin="bevel" points="371.078,671.398 2763.78,671.398"/>
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" stroke-linejoin="bevel" points="371.078,696.198 2763.78,696.198"/>
<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" stroke-
复制代码

2.1.3 清洗数据

需要读取的数据：

①②:每一小节的竖线的左边
③ : 音符的符杆的坐标

[
	{
		"lefeLine":{  // 左边线
			"x":1,
			"y":1,
			"w":1,
			"h":200,
		},
		"rightLine":{  // 右边线
			"x":1,
			"y":1,
			"w":1,
			"h":200,
		},
		"note":[
			{  
				"x":1,
				"y":1,
				"w":1,
				"h":200,
			},
			{  
				"x":1,
				"y":1,
				"w":1,
				"h":200,
			},
			{  
				"x":1,
				"y":1,
				"w":1,
				"h":200,
			},
		]

	}
]
复制代码

这样按照节拍将一节一节的内容放在一个数组里面，后期方便处理数据，加载midi数据按照时长和坐标可以做一个对应关系 （只要拍子没有改变，每个节拍的时长就是固定的，就可以根据midi数据获取每个事件的时间，再和坐标数据来对应，这只是一个大致的思路，但在处理数据的时候还有很多细节要处理，例如连音符等等，还要加上一个算法和乐理知识结合来出来）

2.2 将midi文件转成五线谱图片

有一个开源软件museScore可以将midi进行转换，导出五线谱图片或者svg等格式的数据。