????注：?1.閱讀此篇文章之前开仰，請(qǐng)先觀看下方視頻（記得開啟聲音）
? ? ? ? ? ? ?2.由于該功能大多都是邏輯拟枚，我只說流程，具體我就不多說了众弓，有興趣請(qǐng)看代碼截圖恩溅。
????最近公司在做少兒編程，也就是圖形化編程谓娃，樣例如下
???????對(duì)于這個(gè)音樂編程是我們前端大佬在谷歌的blockly的基礎(chǔ)上修改得到的脚乡。
? ? ? ? 我們先來簡(jiǎn)單說說一下這個(gè)音樂編程的使用，用戶可以從左側(cè)的初始模塊拖拽模塊到右側(cè)部分（最右側(cè)的xml可以通過最右側(cè)的按鈕收回去），拖拽后變成自己的曲子奶稠，點(diǎn)擊上方按鈕執(zhí)行即可（右上方按鈕1:播放與暫停俯艰，按鈕2:停止當(dāng)前曲子，按鈕3：（曲子存儲(chǔ)））
????????現(xiàn)在我們要開始實(shí)現(xiàn)這個(gè)音樂編程了锌订，首先我們用wkwebview加載本地網(wǎng)頁,代碼與效果圖下圖
????????上面一切準(zhǔn)備就緒竹握，我們就要開始拖拽自己的曲子（由于簡(jiǎn)書限制gif最大5兆，所以只能盡量簡(jiǎn)單操作）
? ? ? ? 一切準(zhǔn)備完畢辆飘，現(xiàn)在開始解析曲子并播放了啦辐。如上圖右側(cè)，那是根據(jù)用戶編寫的曲子生成的xml代碼蜈项，也是我們的解析代碼芹关。
? ? ? ? 我們先調(diào)用前端大佬為我們寫的函數(shù)來獲取xml代碼
? ? ? ? 下一步開始解析xml代碼
?????????現(xiàn)在我們要開始解析xml傳給我們的數(shù)據(jù)，我們左側(cè)一共有8個(gè)模塊紧卒，key（Number）對(duì)應(yīng)的是模塊序號(hào)侥衬，name（暫時(shí)用不上）對(duì)應(yīng)的是模塊名字，param是我們需要的參數(shù)
????????模塊2: 小提琴跑芳，大提琴轴总，薩克斯，鋼琴聋亡，小號(hào)肘习，長(zhǎng)笛6鐘樂器，前端大佬返還我們param1參數(shù)為1-6
????????模塊3:音符分為18種坡倔，param1參數(shù)1-18漂佩，parma2：節(jié)拍數(shù)，節(jié)拍為0.25 - 4（每次添加0.25罪塔，一秒對(duì)應(yīng)2節(jié)拍）
? ? ? ? 模塊4:軍鼓投蝉，底鼓，桶鼓征堪，強(qiáng)音镲瘩缆，踩镲，音樹佃蚜，雪橇鈴庸娱，盒棒，param1：1-8谐算，parma2：節(jié)拍數(shù)
? ? ? ? 模塊5: 休息功能（相當(dāng)于靜音） ?param1:節(jié)拍數(shù)
????????模塊6:循環(huán)功能 ?param1:循環(huán)次數(shù)熟尉，param2:內(nèi)部循環(huán)模塊條數(shù)
????????模塊7:設(shè)置一個(gè)函數(shù) param1:函數(shù)名，param2:內(nèi)部包裹模塊條數(shù)
????????模塊8:調(diào)用一個(gè)函數(shù) param1:函數(shù)名
????? ? 首先我們創(chuàng)建一個(gè)類用于解析xml給我們的數(shù)據(jù)洲脂，我們要把它轉(zhuǎn)換成能直接告訴我們執(zhí)行的音效與時(shí)間
????????由于函數(shù)模塊和音樂執(zhí)行體是一個(gè)xml返還給我們的斤儿，首先我們要分離執(zhí)行體與函數(shù)
????分離方法如下
????????由于右邊的代碼是按照上面圖形從上往下解析的，不過我們知道，如果著是個(gè)函數(shù)體往果，那么它的number一定是7疆液，param2則是內(nèi)部包裹條數(shù)。通過這個(gè)參數(shù)param2陕贮，我們逐條取出函數(shù)的指令堕油，唯一要注意的是，如果包含了循環(huán)體肮之，記得重新添加循環(huán)體條數(shù)馍迄，而對(duì)于執(zhí)行體，由于不確定條數(shù)局骤，我們只能間接通過函數(shù)體來得到執(zhí)行體，此處執(zhí)行體我們存放在musicArray中暴凑，函數(shù)存于funsXmlDic中峦甩。
? ? 由于篇幅過長(zhǎng)，我們換下一章～
