simple-piano-keyboard

⚠️Prease check the latest version of README.md in GitHub repository simple-piano-keyboard.
The contents of README.md on npm is might a little old or include a bit mistakes because it's not updated without source code's change.

What is this?

simple-piano-keyboard is literally "simple piano keyboard" component of Vue.js🤣
This package doesn't include mechanism of sound for now. But if you have sound sources and combine with, it's possible to create musical instrument, I think.
This is very simple component but that's reason it has infinity possibility🤩

Project setup

Use npm

Install:

npm i simple-piano-keyboard

Add component and css to Vue:

import { createApp } from 'vue';
import SimplePianoKeyboard from 'simple-piano-keyboard';  // add this
import '../node_modules/simple-piano-keyboard/dist/style.css';  // add this
import App from './App.vue';

const app = createApp(App)
app.use(SimplePianoKeyboard)  // add this
app.mount('#app');

Use CDN

Latest version:

<script src="https://cdn.jsdelivr.net/npm/simple-piano-keyboard/dist/simple-piano-keyboard.umd.min.js"></script>

* Note: You need to describe Vue.js's CDN at same.

And describe like below in JS programs:

const { createApp } = Vue;

const vueContent = {
  // Your Vue contents
};

const app = createApp(vueContent);
app.use(SimplePianoKeyboard);
app.mount('#app');

Property list

This is the list of parameters you can input like below:

<simple-piano-keyboard v-model="selectedNotes" lowestNote="C3" highestNote="C4"></simple-piano-keyboard>

Property	Type	Description	Default value
v-model	String[] or Number[]	Array of MIDI note number or international styled note name like 'C4'. For example, the central C on piano is 'C4'. And its one octave higher is 'C5'. MIDI note number of 'C4' is 60. Notes of black key can be expressed like 'A#2' by using #. The value of this property is interlockly changed with keyboard's selection state.	[]
lowestNote	String or Number	The lowest note of a keyboard.	'A0' (The lowest note of the piano with 88 keys)
highestNote	String or Number	The highest note of a keyboard.	'C8' (The highest note of the piano with 88 keys)
keyHeightSize	Number	The height size number of each keys of keyboard. If you input 1, the white key's height is set 12px.	10
keyWidthSize	Number	The width size number of each keys of keyboard. If you input 1, the white key's width is set 3px.	10
padding	Number	The padding of the frame of keyboard.	8
width	Number	The width of the frame of keyboard. Overflew areas are displayed by scrolling.	380
color	Object	Define colors.	{whiteKey: '#FFFFFF', blackKey: '#222222', selectedWhiteKey: '#B2EBF2', selectedBlackKey: '#B2EBF2', keyBorder: '#212121', frameBorder: '#e0e0e0', noteName: '#212121'}
thickness	Object	Define thickness of some borders.	{keyBorder: 1, frameBorder: 2}
noteNameDisplay	Object	The settings of display note names on each key. type can be set 'none', 'intl' or 'num'. target can be set note alphabets not included # like 'A', 'C'.	{type: 'none', target: 'A'}
noteOutputType	String	'intl': International styled note name 'num': Note number	'intl'
isReadOnly	Boolean	If you set true, clicking keys is be disabled.	false