JSFiddle - React, Tailwind, and code Playground

by Michael Perrenoud

JavaScript

console.clear();

const json = JSON.stringify({
  "attributes": {
    "bassRows": 3,
    "songId": "e00aaef0-63cd-0135-d7ad-06b0df5c0106",
    "drumRows": 4,
    "divisionScheme": {
      "beatPerMeasure": 4,
      "segmentsPerBeat": 2
    },
    "chordRows": 3,
    "songType": 2,
    "dateModified": "2017-08-15 13:00:27",
    "databaseId": 53774,
    "tempo": 129,
    "melodicRows": 8,
    "title": "John's Welcome to MusiQuest"
  },
  "percussiveFolder": {
    "drumKit": "Standard Kit",
    "tracks": [{
      "instrument": "Crash Cymbal",
      "roleIndex": 5,
      "content": [{
        "notes": [{
          "position": 0,
          "note": {
            "instrument": "Crash Cymbal",
            "duration": {
              "measures": 0,
              "scheme": {
                "beatPerMeasure": 4,
                "segmentsPerBeat": 2
              },
              "beatSegments": 1,
              "beats": 0
            }
          }
        }],
        "time": {
          "measures": 0,
          "scheme": {
            "beatPerMeasure": 4,
            "segmentsPerBeat": 2
          },
          "beatSegments": 0,
          "beats": 0
        }
      }]
    }, {
      "instrument": "Bass Drum",
      "roleIndex": 5,
      "content": [{
        "notes": [{
          "position": 3,
          "note": {
            "instrument": "Bass Drum",
            "duration": {
              "measures": 0,
              "scheme": {
                "beatPerMeasure": 4,
                "segmentsPerBeat": 2
              },
              "beatSegments": 1,
              "beats": 0
            }
          }
        }],
        "time": {
          "measures": 1,
          "scheme": {
            "beatPerMeasure": 4,
            "segmentsPerBeat": 2
          },
          "beatSegments": 1,
          "beats": 1
        }
      }, {
        "notes": [{
          "position": 3,
          "note": {
            "instrument": "Bass Drum",
            "duration": {
             ...