Napoleon's Pixelated Mugshot

    vue-piano-keyboard

    1.0.10 • Public • Published

    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

    Install

    npm i vue-piano-keyboard

    DownloadsWeekly Downloads

    34

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    8.04 MB

    Total Files

    10

    Last publish

    Collaborators

    • emicu