Rhythm Display

Display a Rhythm based on a json object

HTML

<table width="100%" border="1" align="center">
  <tr>
    <td width="100%" valign="top">
      <script>
        var jsonObj = {
                        "rhythmName":     "Rhythm Name", 
                        "rhythmID":       "123",    
                        "beats":          "4",
                        "countsPerBeat":  "4",
                        "beatsToDisplay": "4",
                        "tempo":          "120",
                        "rhythmNotes":    "bla <b>bla</b> bla <u>bla</u>",
                        "lines": [
                          {"soundName":"Bass Drum", "soundID":"321", "notes":"BD - - - - - - - BD - - - - - - -"      }, 
                          {"soundName":"High Tom" , "soundID":"322", "notes":"- - HT - - - HT - - - - - HT - - -"     },
                          {"soundName":"Mid Tom 1", "soundID":"323", "notes":"- - - - - - - - - - - - - - mt1 -"      },
                          {"soundName":"Mid Tom 2", "soundID":"324", "notes":"- - - - mt2 - - - - - mt2 - - - - mt2"  }
                        ]
                      };
                      
        document.write("<pre>" + displayRhythm(jsonObj) + "</pre>");
      </script>
    </td>

    <td width="50%" valign="top" align="center">
      <div style="margin:0 auto;border:1px dashed;text-align:center;display: inline-block;overflow:hidden;overflow-y:hidden;overflow-x:hidden;" >
        <div style="border:0px solid;height: auto;text-align:left;font-size:large;float: left;">
          <b>Rhythm Name</b>
        </div>
        
        <div style="border:0px solid;height: auto;text-align:right;float: right;">
          Tempo: 120
        </div>
        
        <div style="clear: both;"</div>
        
        <div id="divSounds" style="border:0px #FFF solid;float: left;">
          <div style="border:0px solid;float: left;text-align:left;">
            <div style="border:1px solid;padding:1px;">
              &nbsp;
            </div>
            <div style="border:1px...

JavaScript

function displayRhythm(json) {

  /* javascript magic on json object */

  json["rhythmNotes"] = json["rhythmNotes"].replace(/</g,"&lt;");
  return JSON.stringify(json,null,2);
}