pixi-piano-roll
pixi-piano-roll copied to clipboard
mjhasbach
JavaScript 2D WebGL / Canvas animated 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.
1for 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
-
.playback :
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
mjhasbach