An interactive piano keyboard for Vue. Supports click/keyboard events and some configurations. Try it out.
npm i vue-piano-keyboard
Alternatively, you can download the UMD build from unpkg.
Import and use the compoment:
<template><div id="app"><PianoKeyboard/></div></template><script>name: 'App'components:PianoKeyboard</script>
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).
||Array||(all the keyboard numbers/signs/letters)
||An array of keyboard keys which corresponds to musical notes, from left to right the values will be assigned to the piano tiles.|
||String||"#1eb7eb"||Color for white notes when they are pressed|
||String||"#f9bb2d"||Color for black notes when they are pressed|
||Boolean||false||It will show the key corresponding to each note|
||Boolean||false||It will show the notes corresponding to each tile|
||Number||2||The notes will start from startOctave|
||Number||4||The notes will end at endOctave|
||Boolean||false||It will sustain the note (some more seconds) after you release the key/click|
The width (100%) and the height (100%) are adjusted base on the first parent width and height