Vue-piano-roll NPM

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/style.css";

const notes = ref([]);

import { PianoRoll, PianoRollNote } from "vue-piano-roll";
import "vue-piano-roll/dist/style.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

Prop	Type	Default Value	Description
zoomX	Number	0.5	Defines the zoom level along the x-axis.
zoomY	Number	1	Defines the zoom level along the y-axis.
rangeBottom	OctaveNote	"C1"	The lowest note that the piano roll should display.
rangeTop	OctaveNote	"G5"	The highest note that the piano roll should display.
currentBeat	Number	-1	The current beat.
currentTick	Number	--	The current tick within the beat.
ticksPerBeat	Number	2	The number of ticks in a beat.
defaultNoteLength	Number	1	The default number of beats in a note.
noteHeight	Number	2	The apparent 3D height of the piano roll notes.
modelValue	Array	--	The array of notes for the piano roll.
length	Number\|"infinite"	80	The total length of the piano roll. (also supports the string "infinite")
loop	Boolean	true	If true, the piano roll will loop back to the beginning when it reaches the end.
noteColor	String	"#f43f5f"	The default color of the piano roll notes.
backgroundColor	String	"rgb(76, 85, 99)"	The background color of the piano roll.
incidentalColor	String	"rgb(55, 65, 81)"	The color of the incidentals (sharps and flats) in the piano roll.
gridColor	String	"rgb(107, 114, 128)"	The color of the grid lines in the piano roll.
labelColor	String	"rgb(255, 255, 255)"	The color of the note labels in the piano roll.
labelIncidentalColor	String	"rgb(107, 114, 128)"	The color of the incidental note labels in the piano roll.
labelBackgroundColor	String	"rgb(107, 114, 128)"	The background color of the note labels in the piano roll.
labelBorderColor	String	"rgb(75, 85, 99)"	The border color of the note labels in the piano roll.
borderWidth	Number	1	The width of the border around the piano roll.
shadowColor	String	"rgba(255, 255, 255, 0.3)"	The color of the shadow cast by the notes in the piano roll.
shadowMap	Array	[]	An array of ShadowMap objects, each defining how shadows appear for a specific note in the piano roll.
onNoteEvent	Function	--	A callback function with a NoteEvent argument that includes a list of notes that have started/ended.