注： 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中。
由于篇幅过长，我们换下一章～
网友评论