因自己手上项目需求,要求处理JSON音乐数据。(由MIDI格式转JSON后处理)
基本思路,取出JSON中的必要数据,根据自己的需求通过JSON的基本格式构建字符串。
首先我的JSON文件:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> <div id="jsonTip"></div> <input type="button" value="获取数据" id="btn"/> <script type="text/javascript"> $(function (){ $("#btn").click(function () { $.getJSON("./newjson1.json", function (data){ //newjson1.json是文件名 var jsontip = $("#jsonTip"); //获取div标签 var countTime = 0; //总计时间 var noteData = data["tracks"][1]["notes"]; //获取note节点 var noteLength = noteData.length; //获取note节点下音符的数量 var avrageTime = 0; //平均时间 var baseTime = 0; //基准时间 var beatNumArray = new Array(); //存储每个note的节拍数 jsontip.empty(); //清空div中的数据 console.log(noteData.length); for(var i = 0; i < noteLength; i++){ countTime += noteData[i]["duration"]; } avrageTime = countTime/noteLength; //平均时间 baseTime = avrageTime/16; //1/16拍为基准时间 console.log(data["tracks"][1]["notes"]); for(var i = 0; i < noteLength; i++){ var noteBeatNum = noteData[i]["duration"]/baseTime; if(noteBeatNum < 2.5) noteBeatNum = 0.125;// 1/8 else if(noteBeatNum < 3.5) noteBeatNum = 0.1875;// 3/16 else if(noteBeatNum < 5) noteBeatNum = 0.25;// 1/4 else if(noteBeatNum < 7) noteBeatNum = 0.375;// 3/8 else if(noteBeatNum < 10) noteBeatNum = 0.5;// 1/2 else if(noteBeatNum < 14) noteBeatNum = 0.75;// 3/4 else if(noteBeatNum < 20) noteBeatNum = 1;// 1/1 else if(noteBeatNum < 28) noteBeatNum = 1.5; else if(noteBeatNum < 40) noteBeatNum = 2; else if(noteBeatNum < 56) noteBeatNum = 3; else noteBeatNum = 4; beatNumArray[i] = noteBeatNum; } //JSON数据必要头与尾包装 var headData = '"beatTime":' + baseTime + ',' + "<br>" + '"perPartBeat": 4 ,' + "<br>" + '"note":[' + '<br>'; var endData = ']'; //console.log(headData+endData); for(var i = 0; i < noteLength; i++){ headData += '{"midi":' + noteData[i]["midi"] + ',' + '<br>' + '"lyric":' + ',' + '<br>' + '"perNoteBeatNum":' + beatNumArray[i] + '},' + '<br>'; } jsontip.html(headData+endData); }); }); }); </script> </body> </html>
结果(因为上图的JSON文件是我把冗余的JSON数据删除):