iOS—js版图形化编曲01

    注： 1.阅读此篇文章之前，请先观看下方视频（记得开启声音）

             2.由于该功能大多都是逻辑，我只说流程，具体我就不多说了，有兴趣请看代码截图。

    最近公司在做少儿编程，也就是图形化编程，样例如下

小星星

图形化编程

       对于这个音乐编程是我们前端大佬在谷歌的blockly的基础上修改得到的。

        我们先来简单说说一下这个音乐编程的使用，用户可以从左侧的初始模块拖拽模块到右侧部分（最右侧的xml可以通过最右侧的按钮收回去），拖拽后变成自己的曲子，点击上方按钮执行即可（右上方按钮1:播放与暂停，按钮2:停止当前曲子，按钮3：（曲子存储））

        现在我们要开始实现这个音乐编程了，首先我们用wkwebview加载本地网页,代码与效果图下图

网页加载

        上面一切准备就绪，我们就要开始拖拽自己的曲子（由于限制gif最大5兆，所以只能尽量简单操作）

用户编曲

        一切准备完毕，现在开始解析曲子并播放了。如上图右侧，那是根据用户编写的曲子生成的xml代码，也是我们的解析代码。

        我们先调用前端大佬为我们写的函数来获取xml代码

获取xml

        下一步开始解析xml代码

xml解析

dataArray数据

         现在我们要开始解析xml传给我们的数据，我们左侧一共有8个模块，key（Number）对应的是模块序号，name（暂时用不上）对应的是模块名字，param是我们需要的参数

        模块2: 小提琴，大提琴，萨克斯，钢琴，小号，长笛6钟乐器，前端大佬返还我们param1参数为1-6

        模块3:音符分为18种，param1参数1-18，parma2：节拍数，节拍为0.25 - 4（每次添加0.25，一秒对应2节拍）

        模块4:军鼓，底鼓，桶鼓，强音镲，踩镲，音树，雪橇铃，盒棒，param1：1-8，parma2：节拍数

        模块5: 休息功能（相当于静音）  param1:节拍数

        模块6:循环功能  param1:循环次数，param2:内部循环模块条数

        模块7:设置一个函数 param1:函数名，param2:内部包裹模块条数

        模块8:调用一个函数 param1:函数名

模块图

        首先我们创建一个类用于解析xml给我们的数据，我们要把它转换成能直接告诉我们执行的音效与时间

xml数据解析

        由于函数模块和音乐执行体是一个xml返还给我们的，首先我们要分离执行体与函数

函数图

    分离方法如下

函数与执行体分离_02

函数与执行体分离_02

        由于右边的代码是按照上面图形从上往下解析的，不过我们知道，如果着是个函数体，那么它的number一定是7，param2则是内部包裹条数。通过这个参数param2，我们逐条取出函数的指令，唯一要注意的是，如果包含了循环体，记得重新添加循环体条数，而对于执行体，由于不确定条数，我们只能间接通过函数体来得到执行体，此处执行体我们存放在musicArray中，函数存于funsXmlDic中。

    由于篇幅过长，我们换下一章～