vue-piano-roll

PianoRoll Vue Component

A flexible, highly customizable Piano Roll component for Vue.js. This component allows you to create a piano roll in your Vue application with ease.

Demo

Demo available here and demo source code, here.

Installation

yarn add vue-piano-roll

Usage

Import the component in your Vue application:

import { PianoRoll } from "vue-piano-roll";
import "vue-piano-roll/dist/vue-piano-roll.css";

const notes = ref([]);

or

import { PianoRoll, type PianoRollNote } from "vue-piano-roll";
import "vue-piano-roll/dist/vue-piano-roll.css";

const notes = ref([] as PianoRollNote[]);

Then use the PianoRoll component in your template:

<piano-roll v-model="notes"></piano-roll>

The PianoRoll component requires a v-model binding to an array to function correctly and also supports a variety of optional props:

<piano-roll
  v-model="notes"
  :zoomX="0.5"
  :zoomY="1"
  :currentBeat="0"
  :currentTick="0"
  :ticksPerBeat="4"
  :rangeBottom="'C1'"
  :rangeTop="'G5'"
  :length="80"
  :defaultNoteLength="2"
  :noteHeight="1"
  :noteColor="'#f43f5f'"
  :loop="true"
  :onNoteEvent="handleNoteEvent"
></piano-roll>

Props

Events

The PianoRoll emits the following events:

Contributing

Contributions are welcome! If you have any issues or

feature requests, please submit an issue on Github.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.