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.

!screenshot

Usage

yarn add react-piano-roll

``jsx
import PianoRoll from "react-piano-roll";

width={1200}
height={660}
zoom={6}
resolution={2}
gridLineColor={0x333333}
blackGridBgColor={0x1e1e1e}
whiteGridBgColor={0x282828}
noteData={[
["0:0:0", "F5", ""],
["0:0:0", "C4", "2n"],
["0:0:0", "D4", "2n"],
["0:0:0", "E4", "2n"],
["0:2:0", "B4", "4n"],
["0:3:0", "A#4", "4n"],
["0:0:0", "F2", ""],
]}
/>;
`

Playback API

The transport controls are passed down through a ref:

`jsx
import React, { useRef } from "react";
import PianoRoll from "./dist/PianoRoll";

function App() {
const playbackRef = useRef();

window.addEventListener("keydown", ({ key }) => {
if (key === " ") {
playbackRef.current.toggle();
} else if (key === "Enter") {
playbackRef.current.seek("0:0:0");
}
});

return ;
}
`

👇 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


$3

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

`js
var pianoRoll = pixiPianoRoll({
width: 900,
height: 400,
noteColor: 0xdb000f,
gridLineColor: 0x333333,
backgroundColor: 0x1a0002,
bpm: 140,
antialias: true,
zoom: 4,
resolution: 2,
time: "0:0:0",
renderer: "WebGLRenderer",
noteFormat: "String",
noteData: [
["0:0:0", "C4", "2n"],
["0:0:0", "D4", "2n"],
["0:0:0", "E4", "2n"],
["0:2:0", "B4", "4n"],
["0:3:0", "A#4", "4n"],
],
});

document.getElementsByTagName("body")[0].appendChild(pianoRoll.view);

pianoRoll.playback.play();
`

transportTime : string

Playback position expressed in bars:quarters:sixteenths format (e.g. "1:2:0")

Kind: global typedef


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

Kind: global typedef


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)

Kind: global typedef

noteData : Array.<Array.<transportTime, note, noteDuration>>

See the typedefs for transportTime, note, and noteDuration

Kind: global typedef

pianoRollAPI : Object

The piano roll API

Kind: global typedef

- pianoRollAPI : Object
- .playback : Object
- [.toggle([time])](#pianoRollAPI.playback.toggle)
- [.play([time])](#pianoRollAPI.playback.play)
- .pause()
- .seek(time)
- .bpm : number
- .zoom : number
- .resolution : number
- .noteData : noteData
- .playing : boolean
- .view : HTMLElement

$3

Contains methods that control playback

Kind: static property of pianoRollAPI

- .playback : Object
- [.toggle([time])](#pianoRollAPI.playback.toggle)
- [.play([time])](#pianoRollAPI.playback.play)
- .pause()
- .seek(time)

#### 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 |

$3

Change the bpm by changing this property

Kind: static property of pianoRollAPI

$3

Change the zoom by changing this property

Kind: static property of pianoRollAPI

$3

Change the resolution by changing this property

Kind: static property of pianoRollAPI

$3

Change the note data by changing this property

Kind: static property of pianoRollAPI

$3

Whether or not playback is ongoing

Kind: static property of pianoRollAPI
Read only: true

$3

The piano roll canvas element

Kind: static property of pianoRollAPI
Read only: true