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([]);
or
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. |
Events
The PianoRoll emits the following events:
Event | Output Type | Description |
---|---|---|
update:modelValue |
Array | Emits the updated array of notes when notes are modified. |
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.