iOS—js版图形化编曲01

    注: 1.阅读此篇文章之前,请先观看下方视频(记得开启声音)

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

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


小星星
iOS—js版图形化编曲01_第1张图片
图形化编程

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

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

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

iOS—js版图形化编曲01_第2张图片
网页加载

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

用户编曲

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

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

iOS—js版图形化编曲01_第3张图片
获取xml

        下一步开始解析xml代码

iOS—js版图形化编曲01_第4张图片
xml解析


iOS—js版图形化编曲01_第5张图片
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:函数名


iOS—js版图形化编曲01_第6张图片
模块图

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

iOS—js版图形化编曲01_第7张图片
xml数据解析

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

iOS—js版图形化编曲01_第8张图片
函数图

    分离方法如下


iOS—js版图形化编曲01_第9张图片
函数与执行体分离_02
iOS—js版图形化编曲01_第10张图片
函数与执行体分离_02

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

    由于篇幅过长,我们换下一章~

你可能感兴趣的:(iOS—js版图形化编曲01)