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 |