JSPM

react-piano-roll

0.1.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q76345F
  • License MIT

React piano roll component based on mjhasbach/pixi-piano-roll

Package Exports

  • react-piano-roll

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-piano-roll) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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

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.playback : Object

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

pianoRollAPI.bpm : number

Change the bpm by changing this property

Kind: static property of pianoRollAPI

pianoRollAPI.zoom : number

Change the zoom by changing this property

Kind: static property of pianoRollAPI

pianoRollAPI.resolution : number

Change the resolution by changing this property

Kind: static property of pianoRollAPI

pianoRollAPI.noteData : noteData

Change the note data by changing this property

Kind: static property of pianoRollAPI

pianoRollAPI.playing : boolean

Whether or not playback is ongoing

Kind: static property of pianoRollAPI
Read only: true

pianoRollAPI.view : HTMLElement

The piano roll canvas element

Kind: static property of pianoRollAPI
Read only: true