pixi-piano-roll

Modules

pixiPianoRoll

JavaScript 2D WebGL / Canvas animated piano roll

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 : Object
  • .playback : Object
    • .toggle([time])
    • .play([time])
    • .pause()
    • .seek(time)
  • .bpm : number
  • .zoom : number
  • .resolution : number
  • .noteData : noteData
  • .playing : boolean
  • .view : HTMLElement

pianoRollAPI.playback : Object

Contains methods that control playback

Kind: static property of pianoRollAPI

• .playback : Object
  • .toggle([time])
  • .play([time])
  • .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

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