Skip to content

dpren/react-piano-roll

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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