[Polymer] Pianoroll GUI library for Web application / relevant to webaudio-controls
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
bower_components add files Jan 31, 2017
bower.json fix live demo page Feb 2, 2017
index2.html improve drag mode editing Feb 11, 2017
index3.html add some description Feb 11, 2017



[Polymer] Pianoroll GUI library for Web application / relevant to webaudio-controls

webaudio-pianoroll is a Polymer GUI module for pianoroll. Using webaudio-pianoroll with webaudio-controls makes it easy to build webaudio application.

webaudio-controls is here :

  • Editmode - webaudio-pianoroll has four edit mode, gridmono, gridpoly, dragmono and dragpoly. grid types are just toggle the grid cell by clicking, and the note length is always 1 tick. that matches to rhythm machine like one. The other hand, drag types can specify note length by dragging. that are matches generic pianoroll apps.
  • Many customize options.
  • Play support - webaudio-pianoroll has not direct sound generation function, but has play support function.

Live Demo page is available.
'gridmono' mode demo : Live Demo
'dragpoly' timebase=480 mode demo : Live Demo


  • Install Polymer and webaudio-pianoroll

    webaudio-pianoroll is a polymer module. You should prepare polymer related library first.

    If you know bower, use the command > bower install g200kg/webaudio-pianoroll.
    This command prepares polymer and webaudio-pianoroll under your current folder.
    Otherwise, download zipped file and deploy appropriately. All necessary files are included in this repository.

  • load webcomponents.js and polymer in your HTML

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">

  • load webaudio-pianoroll in your HTML

    <link rel="import" href="bower_components/webaudio-pianoroll/webaudio-pianoroll.html">

    if you use bower, webaudio-pianoroll.html is placed to bower_components/webaudio-pianoroll/ folder, otherwise specify path to webaudio-pianoroll.html

  • place webaudio-pianoroll element


    Indefault, 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>

How To Operate


  • Time axis can be zoomed by mouse wheel if enabled by a "wheelzoom" attribute.

Grid Mode

  • 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 mode

  • 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
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.


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