The Vue Piano Roll component styling is also highly customizable.
[
{
"id": 0,
"start": 0,
"length": 1,
"note": "B2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 1,
"start": 1,
"length": 1,
"note": "B2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 2,
"start": 2,
"length": 1,
"note": "C3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 3,
"start": 3,
"length": 1,
"note": "D3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 4,
"start": 4,
"length": 1,
"note": "D3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 5,
"start": 5,
"length": 1,
"note": "C3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 6,
"start": 6,
"length": 1,
"note": "B2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 7,
"start": 7,
"length": 1,
"note": "A2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 8,
"start": 8,
"length": 1,
"note": "G2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 9,
"start": 9,
"length": 1,
"note": "G2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 10,
"start": 10,
"length": 1,
"note": "A2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 11,
"start": 11,
"length": 1,
"note": "B2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 12,
"start": 12,
"length": 1.5,
"note": "B2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 13,
"start": 13.5,
"length": 0.5,
"note": "A2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 14,
"start": 14,
"length": 2,
"note": "A2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 15,
"start": 0.5,
"length": 1,
"note": "G2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 16,
"start": 2,
"length": 1,
"note": "A2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 17,
"start": 3,
"length": 1,
"note": "B2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 18,
"start": 4.5,
"length": 0.5,
"note": "B2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 19,
"start": 5,
"length": 0.5,
"note": "A2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 20,
"start": 6.5,
"length": 0.5,
"note": "D3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 21,
"start": 7,
"length": 1,
"note": "C3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 22,
"start": 8,
"length": 1,
"note": "B2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 23,
"start": 13,
"length": 0.5,
"note": "G2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 24,
"start": 10,
"length": 1,
"note": "C3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 25,
"start": 14.5,
"length": 1,
"note": "C3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 26,
"start": 9.5,
"length": 0.5,
"note": "D3",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 27,
"start": 11,
"length": 1,
"note": "G2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
},
{
"id": 28,
"start": 12.5,
"length": 0.5,
"note": "F#2",
"velocity": 100,
"color": "#f43f5f",
"selected": false
}
]