• 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数据删除):

  • 相关阅读:
    用于爬取知乎某个话题下的精华问题中所有回答的爬虫
    BSP -- 图书共享系统(Book Sharing Platform)
    【已解决】WPS2018 从第三页开始插入页眉页码(即前两页不要页眉页码)
    【编译原理】大白话讲解 First 集和 Follow 集的构造算法
    如果
    HTTP协议(1)------->资源和URL
    JavaWeb框架_Struts2_(八)----->Struts2的国际化
    深入理解java虚拟机----->垃圾收集器与内存分配策略(下)
    深入理解java虚拟机----->垃圾收集器与内存分配策略(上)
    JavaWeb框架_Struts2_(七)----->文件的上传和下载
  • 原文地址:https://www.cnblogs.com/softwarecrash/p/8688863.html
Copyright © 2020-2023  润新知