因自己手上项目需求,要求处理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数据删除):
