React Piano Roll
A React fork of mjhasbach/pixi-piano-roll.
Note: this is not an audio sequencer in itself – it's just the graphical part.
Usage
yarn add react-piano-roll
import PianoRoll from "react-piano-roll"; <PianoRoll = = = = = = = =/>;
Playback API
The transport controls are passed down through a ref:
import React useRef from "react";import PianoRoll from "./dist/PianoRoll"; { const playbackRef = ; window; return <PianoRoll = />;}
pixi-piano-roll Docs: 👇
👇Typedefs
- transportTime :
string
Playback position expressed in bars:quarters:sixteenths format (e.g.
"1:2:0"
)- note :
string
|number
Musical note expressed in Scientific notation, Helmholtz notation, piano key number, audio frequency (the closest note will be used), or MIDI note number
- noteDuration :
string
|number
Note duration expressed as a number (e.g.
1
for a whole note) or string (e.g."4n"
for a quarter note)- noteData :
Array.<Array.<transportTime, note, noteDuration>>
See the typedefs for transportTime, note, and noteDuration
- pianoRollAPI :
Object
The piano roll API
pixiPianoRoll
JavaScript 2D WebGL / Canvas animated piano roll
Author: Matthew Hasbach
License: MIT
Copyright: Matthew Hasbach 2015
pianoRollAPI
⏏
pixiPianoRoll(opt) ⇒ Instantiate a pixiPianoRoll
Kind: Exported function
Param | Type | Default | Description |
---|---|---|---|
opt | Object |
Options object | |
[opt.width] | number |
900 |
Width of the piano roll |
[opt.height] | number |
400 |
Height of the piano roll |
[opt.pianoKeyWidth] | number |
125 |
Width of the piano keys |
[opt.noteColor] | number | Object.<number> |
musicalScaleColors.dDJameson |
Hexadecimal color of every note or object that has pitch class (chroma) property names and hexadecimal color values. See musical-scale-colors for palettes (including the default). |
[opt.noteColor] | number |
0x333333 |
Hexadecimal color of the grid lines |
[opt.noteColor] | number |
0 |
Hexadecimal color of the background |
[opt.bpm] | number |
140 |
Beats per minute |
[opt.activateKeys] | boolean |
true |
If true, the color of the piano keys will change to the color of the notes that intersect them |
[opt.antialias] | boolean |
true |
Whether or not the renderer will use antialiasing |
[opt.zoom] | number |
4 |
Amount of visible measures |
[opt.resolution] | number |
1 |
Amount of vertical grid lines per measure |
[opt.time] | transportTime |
0:0:0 |
The transportTime at which playback will begin |
[opt.renderer] | string |
"WebGLRenderer" |
Determines the renderer type. Must be "WebGLRenderer" or "CanvasRenderer" . |
[opt.noteFormat] | string |
"String" |
The format of the notes in opt.noteData . "String" for scientific or Helmholtz notation, "Key" for piano key numbers, "Frequency" for audio frequencies, or "MIDI" for MIDI note numbers. |
[opt.noteData] | noteData |
[] |
Note data |
Example
var pianoRoll = ; document0; pianoRollplayback;
string
transportTime : Playback position expressed in bars:quarters:sixteenths format (e.g. "1:2:0"
)
string
| number
note : Musical note expressed in Scientific notation, Helmholtz notation, piano key number, audio frequency (the closest note will be used), or MIDI note number
string
| number
noteDuration : Note duration expressed as a number (e.g. 1
for a whole note) or string (e.g. "4n"
for a quarter note)
Array.<Array.<transportTime, note, noteDuration>>
noteData : See the typedefs for transportTime, note, and noteDuration
Object
pianoRollAPI : The piano roll API
Kind: global typedef
- pianoRollAPI :
Object
Object
pianoRollAPI.playback : Contains methods that control playback
Kind: static property of pianoRollAPI
playback.toggle([time])
Pause if playing or play if paused
Kind: static method of playback
Param | Type | Description |
---|---|---|
[time] | transportTime |
If paused, the position to begin playing. If omitted, playback will begin at the current position. |
playback.play([time])
Begin playback
Kind: static method of playback
Param | Type | Description |
---|---|---|
[time] | transportTime |
The position to begin playing. If omitted, playback will begin at the current position. |
playback.pause()
Pause playback
Kind: static method of playback
playback.seek(time)
Change the playback position
Kind: static method of playback
Param | Type | Description |
---|---|---|
time | transportTime |
The new playback position |
number
pianoRollAPI.bpm : Change the bpm by changing this property
Kind: static property of pianoRollAPI
number
pianoRollAPI.zoom : Change the zoom by changing this property
Kind: static property of pianoRollAPI
number
pianoRollAPI.resolution : Change the resolution by changing this property
Kind: static property of pianoRollAPI
noteData
pianoRollAPI.noteData : Change the note data by changing this property
Kind: static property of pianoRollAPI
boolean
pianoRollAPI.playing : Whether or not playback is ongoing
Kind: static property of pianoRollAPI
Read only: true
HTMLElement
pianoRollAPI.view : The piano roll canvas element
Kind: static property of pianoRollAPI
Read only: true