Hi, i’m trying to draw on canvas with pure js, using arrays from json file.
First, i’m using MidiConvert from:
https://tonejs.github.io/MidiConvert/
To convert midi files to json format,
here is example of conversion twinkle_twinkle.mid to json:
{
"header": {
"PPQ": 960,
"timeSignature": [
4,
4
],
"bpm": 100,
"name": "Twinke Twinkle Little Star"
},
"startTime": 0,
"duration": 28.800000000000015,
"tracks": [
{
"startTime": 0,
"duration": 0,
"length": 0,
"notes": [],
"controlChanges": {},
"id": 0,
"name": "Twinke Twinkle Little Star"
},
{
"startTime": 0,
"duration": 28.800000000000015,
"length": 69,
"notes": [
{
"name": "C4",
"midi": 60,
"time": 0,
"velocity": 0.5433070866141733,
"duration": 0.6
},
{
"name": "C3",
"midi": 48,
"time": 0,
"velocity": 0.5118110236220472,
"duration": 1.2
},
{
"name": "C4",
"midi": 60,
"time": 0.6,
"velocity": 0.5984251968503937,
"duration": 0.6
},
{
"name": "G4",
"midi": 67,
"time": 1.2,
"velocity": 0.6850393700787402,
"duration": 0.5999999999999999
},
{
"name": "E3",
"midi": 52,
"time": 1.2,
"velocity": 0.5984251968503937,
"duration": 1.2
},
{
"name": "G4",
"midi": 67,
"time": 1.7999999999999998,
"velocity": 0.6377952755905512,
"duration": 0.6000000000000001
},
{
"name": "A4",
"midi": 69,
"time": 2.4,
"velocity": 0.6299212598425197,
"duration": 0.6000000000000001
},
{
"name": "F3",
"midi": 53,
"time": 2.4,
"velocity": 0.5984251968503937,
"duration": 1.2000000000000002
},
{
"name": "A4",
"midi": 69,
"time": 3,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000001
},
{
"name": "G4",
"midi": 67,
"time": 3.6,
"velocity": 0.5984251968503937,
"duration": 1.1999999999999997
},
{
"name": "E3",
"midi": 52,
"time": 3.6,
"velocity": 0.6062992125984252,
"duration": 1.1999999999999997
},
{
"name": "F4",
"midi": 65,
"time": 4.8,
"velocity": 0.5275590551181102,
"duration": 0.5999999999999996
},
{
"name": "D3",
"midi": 50,
"time": 4.8,
"velocity": 0.5984251968503937,
"duration": 1.1999999999999993
},
{
"name": "F4",
"midi": 65,
"time": 5.3999999999999995,
"velocity": 0.5826771653543307,
"duration": 0.5999999999999996
},
{
"name": "E4",
"midi": 64,
"time": 5.999999999999999,
"velocity": 0.5748031496062992,
"duration": 0.5999999999999996
},
{
"name": "C3",
"midi": 48,
"time": 5.999999999999999,
"velocity": 0.5905511811023622,
"duration": 1.1999999999999993
},
{
"name": "E4",
"midi": 64,
"time": 6.599999999999999,
"velocity": 0.5826771653543307,
"duration": 0.5999999999999996
},
{
"name": "D4",
"midi": 62,
"time": 7.199999999999998,
"velocity": 0.5590551181102362,
"duration": 0.5999999999999996
},
{
"name": "F3",
"midi": 53,
"time": 7.199999999999998,
"velocity": 0.6377952755905512,
"duration": 0.5999999999999996
},
{
"name": "D4",
"midi": 62,
"time": 7.799999999999998,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000005
},
{
"name": "G3",
"midi": 55,
"time": 7.799999999999998,
"velocity": 0.6141732283464567,
"duration": 0.6000000000000005
},
{
"name": "C4",
"midi": 60,
"time": 8.399999999999999,
"velocity": 0.5354330708661418,
"duration": 1.1999999999999993
},
{
"name": "E3",
"midi": 52,
"time": 8.399999999999999,
"velocity": 0.5511811023622047,
"duration": 0.5999999999999996
},
{
"name": "C3",
"midi": 48,
"time": 8.999999999999998,
"velocity": 0.5669291338582677,
"duration": 0.5999999999999996
},
{
"name": "G4",
"midi": 67,
"time": 9.599999999999998,
"velocity": 0.6850393700787402,
"duration": 0.5999999999999996
},
{
"name": "E3",
"midi": 52,
"time": 9.599999999999998,
"velocity": 0.6614173228346457,
"duration": 1.1999999999999993
},
{
"name": "G4",
"midi": 67,
"time": 10.199999999999998,
"velocity": 0.6141732283464567,
"duration": 0.5999999999999996
},
{
"name": "F4",
"midi": 65,
"time": 10.799999999999997,
"velocity": 0.5354330708661418,
"duration": 0.5999999999999996
},
{
"name": "F3",
"midi": 53,
"time": 10.799999999999997,
"velocity": 0.5984251968503937,
"duration": 1.1999999999999993
},
{
"name": "F4",
"midi": 65,
"time": 11.399999999999997,
"velocity": 0.5669291338582677,
"duration": 0.5999999999999996
},
{
"name": "E4",
"midi": 64,
"time": 11.999999999999996,
"velocity": 0.5826771653543307,
"duration": 0.5999999999999996
},
{
"name": "G3",
"midi": 55,
"time": 11.999999999999996,
"velocity": 0.6535433070866141,
"duration": 1.1999999999999993
},
{
"name": "E4",
"midi": 64,
"time": 12.599999999999996,
"velocity": 0.5905511811023622,
"duration": 0.5999999999999996
},
{
"name": "D4",
"midi": 62,
"time": 13.199999999999996,
"velocity": 0.5826771653543307,
"duration": 1.1999999999999993
},
{
"name": "G3",
"midi": 55,
"time": 13.199999999999996,
"velocity": 0.5984251968503937,
"duration": 1.1999999999999993
},
{
"name": "G4",
"midi": 67,
"time": 14.399999999999995,
"velocity": 0.6850393700787402,
"duration": 0.5999999999999996
},
{
"name": "E3",
"midi": 52,
"time": 14.399999999999995,
"velocity": 0.5590551181102362,
"duration": 1.1999999999999993
},
{
"name": "G4",
"midi": 67,
"time": 14.999999999999995,
"velocity": 0.6377952755905512,
"duration": 0.5999999999999996
},
{
"name": "F4",
"midi": 65,
"time": 15.599999999999994,
"velocity": 0.5354330708661418,
"duration": 0.6000000000000014
},
{
"name": "F3",
"midi": 53,
"time": 15.599999999999994,
"velocity": 0.6062992125984252,
"duration": 1.2000000000000028
},
{
"name": "F4",
"midi": 65,
"time": 16.199999999999996,
"velocity": 0.5905511811023622,
"duration": 0.6000000000000014
},
{
"name": "E4",
"midi": 64,
"time": 16.799999999999997,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "G3",
"midi": 55,
"time": 16.799999999999997,
"velocity": 0.6299212598425197,
"duration": 1.2000000000000028
},
{
"name": "E4",
"midi": 64,
"time": 17.4,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "D4",
"midi": 62,
"time": 18,
"velocity": 0.5669291338582677,
"duration": 1.1999999999999993
},
{
"name": "G3",
"midi": 55,
"time": 18,
"velocity": 0.5826771653543307,
"duration": 1.1999999999999993
},
{
"name": "C4",
"midi": 60,
"time": 19.2,
"velocity": 0.5748031496062992,
"duration": 0.6000000000000014
},
{
"name": "C3",
"midi": 48,
"time": 19.2,
"velocity": 0.5748031496062992,
"duration": 1.2000000000000028
},
{
"name": "C4",
"midi": 60,
"time": 19.8,
"velocity": 0.5826771653543307,
"duration": 0.6000000000000014
},
{
"name": "G4",
"midi": 67,
"time": 20.400000000000002,
"velocity": 0.6692913385826772,
"duration": 0.6000000000000014
},
{
"name": "E3",
"midi": 52,
"time": 20.400000000000002,
"velocity": 0.6692913385826772,
"duration": 1.2000000000000028
},
{
"name": "G4",
"midi": 67,
"time": 21.000000000000004,
"velocity": 0.6220472440944882,
"duration": 0.6000000000000014
},
{
"name": "A4",
"midi": 69,
"time": 21.600000000000005,
"velocity": 0.6220472440944882,
"duration": 0.6000000000000014
},
{
"name": "F3",
"midi": 53,
"time": 21.600000000000005,
"velocity": 0.6614173228346457,
"duration": 1.2000000000000028
},
{
"name": "A4",
"midi": 69,
"time": 22.200000000000006,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "G4",
"midi": 67,
"time": 22.800000000000008,
"velocity": 0.5433070866141733,
"duration": 1.1999999999999993
},
{
"name": "E3",
"midi": 52,
"time": 22.800000000000008,
"velocity": 0.5826771653543307,
"duration": 1.1999999999999993
},
{
"name": "F4",
"midi": 65,
"time": 24.000000000000007,
"velocity": 0.5826771653543307,
"duration": 0.6000000000000014
},
{
"name": "D3",
"midi": 50,
"time": 24.000000000000007,
"velocity": 0.6220472440944882,
"duration": 1.2000000000000028
},
{
"name": "F4",
"midi": 65,
"time": 24.60000000000001,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "E4",
"midi": 64,
"time": 25.20000000000001,
"velocity": 0.5984251968503937,
"duration": 0.6000000000000014
},
{
"name": "C3",
"midi": 48,
"time": 25.20000000000001,
"velocity": 0.5826771653543307,
"duration": 1.2000000000000028
},
{
"name": "E4",
"midi": 64,
"time": 25.80000000000001,
"velocity": 0.5984251968503937,
"duration": 0.6000000000000014
},
{
"name": "D4",
"midi": 62,
"time": 26.400000000000013,
"velocity": 0.5748031496062992,
"duration": 0.6000000000000014
},
{
"name": "F3",
"midi": 53,
"time": 26.400000000000013,
"velocity": 0.6299212598425197,
"duration": 0.6000000000000014
},
{
"name": "D4",
"midi": 62,
"time": 27.000000000000014,
"velocity": 0.6062992125984252,
"duration": 0.6000000000000014
},
{
"name": "G3",
"midi": 55,
"time": 27.000000000000014,
"velocity": 0.6377952755905512,
"duration": 0.6000000000000014
},
{
"name": "C4",
"midi": 60,
"time": 27.600000000000016,
"velocity": 0.5590551181102362,
"duration": 1.1999999999999993
},
{
"name": "C3",
"midi": 48,
"time": 27.600000000000016,
"velocity": 0.5433070866141733,
"duration": 1.1999999999999993
}
],
"controlChanges": {
"7": [
{
"number": 7,
"time": 0,
"value": 1
},
{
"number": 7,
"time": 0,
"value": 1
}
],
"10": [
{
"number": 10,
"time": 0,
"value": 0.4015748031496063
},
{
"number": 10,
"time": 0,
"value": 0.4015748031496063
}
],
"64": [
{
"number": 64,
"time": 0,
"value": 0
},
{
"number": 64,
"time": 0,
"value": 0
}
],
"91": [
{
"number": 91,
"time": 0,
"value": 0.3779527559055118
},
{
"number": 91,
"time": 0,
"value": 0.3779527559055118
}
],
"121": [
{
"number": 121,
"time": 0,
"value": 0
},
{
"number": 121,
"time": 0,
"value": 0
}
]
},
"id": 1,
"instrumentNumber": 0,
"instrument": "acoustic grand piano",
"instrumentFamily": "piano",
"channelNumber": 0,
"isPercussion": false
}
]
}
After getting json file i manually added x and y position in pixels for each notes,
and now i’m trying to draw each notes on canvas .
I’m not sure how to draw each note as new Rectangle Object,i already have have x and y starting point and static width, but height of rectangle needs to be calculated by using velocity ??
All rectangle objects are animated,so they falling down from top to the bottom of the canvas,
Its a mess, please share some links about using json files to draw on canvas.