五线谱走谱实现方案

·  阅读 646

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

1.基础的乐理知识

1.1大谱表

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

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

  • 高音谱 和 低音谱

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

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

image.png

  • 高音谱和低音谱的联系

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

1.2 音符

1.2.1 音符介绍

image.png

1.2.2 音符种类简介

如下图,依次为 全音符 二分音符 四分音符 八分音符 十六分音符 image.png

音符还有很多种类例如:

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

等等

1.2.3 音符时长计算

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

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

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

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

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

四分音符全音符二分音符八分音符附点二分音符双附点二分音符
1420.52 + 12 + 1 + 0.5
0.5s2s1s0.25s1.5s1.75s

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 清洗数据

image.png

需要读取的数据:

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

[
	{
		"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文件导出成含有布局信息的MusicXML文件】

2.2.1 用museScore 软件导出含有布局信息的MusicXML 数据

2.2.2 解析分析数据,提取有用信息即可 (只展示出部分数据,可自行导出解析)

<defaults>
    <scaling>
      <millimeters>6.99911</millimeters>
      <tenths>40</tenths>
      </scaling>
    <page-layout>
      <page-height>1697.36</page-height>
      <page-width>1200.15</page-width>
      <page-margins type="even">
        <left-margin>85.7252</left-margin>
        <right-margin>85.7252</right-margin>
        <top-margin>85.7252</top-margin>
        <bottom-margin>85.7252</bottom-margin>
        </page-margins>
      <page-margins type="odd">
        <left-margin>85.7252</left-margin>
        <right-margin>85.7252</right-margin>
        <top-margin>85.7252</top-margin>
        <bottom-margin>85.7252</bottom-margin>
        </page-margins>
      </page-layout>
    <word-font font-family="Edwin" font-size="10"/>
    <lyric-font font-family="Edwin" font-size="10"/>
    </defaults>
    
    <part id="P1">
    <measure number="1" width="436.07">
      <print>
        <system-layout>
          <system-margins>
            <left-margin>245.11</left-margin>
            <right-margin>0.00</right-margin>
            </system-margins>
          <top-system-distance>70.00</top-system-distance>
          </system-layout>
        </print>
      <attributes>
        <divisions>6</divisions>
        <key>
          <fifths>0</fifths>
          </key>
        <time>
          <beats>4</beats>
          <beat-type>4</beat-type>
          </time>
        <clef>
          <sign>G</sign>
          <line>2</line>
          </clef>
        </attributes>
      <direction placement="above">
        <direction-type>
          <metronome parentheses="no" default-x="-105.98" relative-y="20.00">
            <beat-unit>quarter</beat-unit>
            <per-minute>130</per-minute>
            </metronome>
          </direction-type>
        <sound tempo="130"/>
        </direction>
      <note default-x="149.86" default-y="-5.00" dynamics="88.89">
        <pitch>
          <step>E</step>
          <octave>5</octave>
    
复制代码

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

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

分类:
iOS
标签:
分类:
iOS
标签: