webaudio-pianoroll is a GUI library for displaying piano rolls used in music applications.
- Editmode -
webaudio-pianorollhas four edit mode,gridmono,gridpoly,dragmonoanddragpoly.gridtypes are just toggle the grid cell by clicking, and the note length is always 1 tick.gridtypes matche to rhythm machine like app. The other hand,dragtypes can specify note length by dragging. that are matches generic pianoroll apps. - Many customize options.
- Play support -
webaudio-pianorollhas not direct sound generation function, but has play support function.
Live Demo page is available.
Deploy webaudio-pianoroll.js appropriately. necessary file is only webaudio-pianoroll.js.
Load the webaudio-pianoroll.js :
<script src="./webaudio-pianoroll.js"></script>
Or, just directory load from GitHub pages as CDN.
<script src="https://g200kg.github.io/webaudio-pianoroll/webaudio-pianoroll.js"></script>
<script src="webcomponents-lite.min.js"></script>
<webaudio-pianoroll></webaudio-pianoroll>
In default, it makes element like this:
Then you can customize the pianoroll with attributes. For example,
<webaudio-pianoroll width="300" height="200" xrange="64" markend="64" collt="#33f" coldk="#338" editmode="dragmono"></webaudio-pianoroll>
- Time axis can be zoomed by mouse wheel if enabled by a "wheelzoom" attribute.
- The cell can be toggle on/off by clicking.
- When dragging, you can turn on or off multiple cells depending on the state of the first cell.
- Drag with the left button to create a specified length note.
- Click existing note to select.
- Drag with the right button to select notes within the specified area (Whether the note is included in the range or not is determined based on whether or not the beginning of the note is included).
- Selected notes can be moved by left button dragging.
- Drag the left or right edge of the selected note to change the length of the note.
- Right click on the selected note to delete menu.
| Attribute | Options | Default | Description |
|---|---|---|---|
| width | Number | 640 | width of element in px |
| height | Number | 320 | height of element in px |
| editmode | String | "gridmono" | combination of "grid"/"drag" + "mono"/"poly" |
| timebase | Number | 16 | time resolution of 1 bar, (1 bar / timebase = 1 tick) |
| xrange | Number | 16 | time axis view range in tick |
| yrange | Number | 16 | y axis view range in note number |
| xoffset | Number | 0 | time axis offset in tick |
| yoffset | Number | 60 | y axis offset in note number |
| xscroll | Number | 0 | if 1, x axis scroll enable |
| yscroll | Number | 0 | if 1, y axis scroll enable |
| grid | Number | 4 | time axis grid density in tick |
| snap | Number | 1 | note x position snapping in tick |
| wheelzoom | Number | 0 | if non 0, time axis zoom by wheel is enabled |
| xruler | Number | 24 | time axis ruler height in px |
| yruler | Number | 24 | y axis ruler width in px |
| octadj | Number | -1 | ruler octave value adjust (-1 : 60=C4) |
| cursor | Number | 0 | current play position in tick |
| markstart | Number | 0 | play range start marker position in tick |
| markend | Number | 16 | play range end marker position in tick |
| collt | String | "#ccc" | score background (light part) color |
| coldk | String | "#aaa" | score background (dark part) color |
| colgrid | String | "#666" | score grid color |
| colnote | String | "#f22" | note color |
| colnotesel | String | "#0f0" | selected note color (for editmode="drag") |
| colnoteborder | String | "#000" | note border color |
| colrulerbg | String | "#666" | ruler background color |
| colrulerfg | String | "#fff" | ruler foreground color |
| colrulerborder | String | "#000" | ruler border color |
| bgsrc | String | null | background image url. To make visible this, you should set collt/coldk non-opaque with 'rgba(r,g,b,a)' style. |
| cursorsrc | String | internal resource | playcursor image url |
| cursoroffset | Number | 0 | playcursor image x offset in px |
| markstartsrc | String | internal resource | markstart image url |
| markstartoffset | Number | 0 | markstart image x offset in px |
| markendsrc | String | internal resource | markend image url |
| markendoffset | Number | -24 | markend image x offset in px |
| kbsrc | String | internal resource | keyboard image url |
| kbwidth | Number | 40 | keyboard image width in px |
| loop | Number | 1 | loop play |
| preload | Number | 1 | data preload when play in sec |
| tempo | Number | 120 | tempo when play |
| Function | Description |
|---|---|
| redraw() | redraw all |
| getMMLString() | get MML string of current data. Note that this function is for mono type editmode. |
| setMMLString(str) | set MML string to webaudio-pianoroll. Note that this function is for mono type editmode. |
| locate(tick) | set cursor to specified tick |
| play(audioContext, callback, starttick) | play current data. webaudio-pianoroll does not generate sound directly, but it passes necessary information to the specified callback function. audioContext is used to control the time axis. If starttick is not specified, play from current cursor position. |
| stop() | stop playing. |
play() function passes necessary data for playing to callback function like :
callback({t:noteOnTime, g:noteOffTime, n:noteNumber})
Here the noteOnTime and noteOffTime is audioContext timeline value.
If you want to access directly to sequence data, you can touch the DOMElement.sequence.
DOMElement.sequence is an Array of noteEvents. Here the noteEvent is a object of one note infomation of:
{t:noteOnTick g:noteLength n:noteNumber}
webaudio-pianoroll is licensed under the Apache License, Version 2.0