React-piano-roll NPM

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

import PianoRoll from "react-piano-roll";

<PianoRoll
  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:

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 <PianoRoll ref={playbackRef} />;
}

👇 pixi-piano-roll Docs: 👇

Typedefs

pixiPianoRoll

JavaScript 2D WebGL / Canvas animated piano roll

Author: Matthew Hasbach
License: MIT
Copyright: Matthew Hasbach 2015

pixiPianoRoll(opt) ⇒ pianoRollAPI ⏏

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 = 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();