svg-piano
v0.3.1
Published
correctly sized svg piano for the web
Downloads
140
Readme
SVG Piano
This lib includes the rendering logic for a correctly sized piano.
Demo
- React Demo
- Svelte Demo
- see demo folder for usage with plain js
npm run start
to run
Options
- range: lowest and highest key e.g.
['A1','C6']
- palette: array to customize color with format
['black', 'white']
- stroke: stroke color
- colorize: custom colorization e.g
[
{ keys: ['E2', 'Bb2'], color: 'yellow' },
{ keys: ['C2', 'G2'], color: 'brown' }
];
- labels: add labels to certain keys:
{
C2: '1',
Eb2: 'b3',
G2: '5',
Bb2: 'b7',
}
- visibleKeys: which pitches should be visible? e.g
['G','A','B','C','D','E','F#']
- scaleX: changes scaling in x direction
- scaleY: changes scaling in y direction
- upperHeight: px height of upper area
- lowerHeight: px height of lower area
- strokeWidth: border width in px