• JavaScript处理JSON数据


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

  • 相关阅读:
    如何把项目部署到OSChina上
    读书笔记----10日摘抄整理(05)
    读书笔记----10日摘抄整理(04)
    读书笔记----10日摘抄整理(03)
    读书笔记----10日摘抄整理(02)
    读书笔记----10日摘抄整理(01)
    前五题半
    作业3
    作业: 1.8(圆的面积和周长)编写程序,使用以下的公式计算并显示半径为5.5的圆的面积和周长。
    作业:1.12假设一个跑步者1小时40分钟35秒 内跑了24英里。编写一个程序显示以每小时多少公里为单位的平均速度值(注意,1英里等于1.6公里。)
  • 原文地址:https://www.cnblogs.com/softwarecrash/p/8688863.html
Copyright © 2020-2023  润新知