Package Exports
- pixi-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 (pixi-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
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")
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
Kind: global typedef
- pianoRollAPI :
Object
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