1.0.10 • Published 3 years ago
vue-piano-keyboard v1.0.10
vue-piano
An interactive piano keyboard for Vue. Supports click/keyboard events and some configurations. Try it out.
Installing
npm i vue-piano-keyboard
Alternatively, you can download the UMD build from unpkg.
Usage
Import and use the compoment:
<template>
<div id="app">
<PianoKeyboard/>
</div>
</template>
<script>
import PianoKeyboard from 'vue-piano-keyboard'
export default {
name: 'App',
components: {
PianoKeyboard
}
}
</script>
Audio
vue-piano component uses Tone.js library for audio playback of each note, more specifically it uses Tone.Synth (that's why the size of the component it's pretty big).
Props
Name | Type | Default Value | Description |
---|---|---|---|
allKeys | Array | (all the keyboard numbers/signs/letters) ['a', 's', 'd', ..] | An array of keyboard keys which corresponds to musical notes, from left to right the values will be assigned to the piano tiles. |
whiteNoteColor | String | "#1eb7eb" | Color for white notes when they are pressed |
blackNoteColor | String | "#f9bb2d" | Color for black notes when they are pressed |
showKeys | Boolean | false | It will show the key corresponding to each note |
showNotes | Boolean | false | It will show the notes corresponding to each tile |
startOctave | Number | 2 | The notes will start from startOctave |
endOctave | Number | 4 | The notes will end at endOctave |
sustain | Boolean | false | It will sustain the note (some more seconds) after you release the key/click |
Style
The width (100%) and the height (100%) are adjusted base on the first parent width and height
License
MIT