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-rollUsage
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.