vue-piano-keyboard

A piano keyboard component for Vue.js 2+

Usage no npm install needed!

<script type="module">
  import vuePianoKeyboard from 'https://cdn.skypack.dev/vue-piano-keyboard';
</script>

README

vue-piano

npm version bundle size

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