Rendering large pianoroll with html/Javascript

Question

I am working on a html5 audio app using the new web audio api, what I need for this is a "pianoroll", a keyboard grid where a user can draw notes as used in most music production software, I was thinking about two ways to create this.

1. Create a large html table and create tags inside cells to draw the notes
   • PRO note manipulation is easy because we are working with html element and can use their events and methods.
   • CON I did a few projects using huge tables and my experience browsers tend to get slow when working with that many elements.
2. Create a canvas to render the grid and notes
   • PRO Could be faster to render if compared to a huge table with some smart caching
   • CON Would require more effort to make note manipulation work.
   • CON Still scrolling a huge image.

I need to use the method that is most resource friendly because the rendering of the audio shouldn't be influenced by a slow responding interface, users should be able to scroll inside the pianoroll without any glitches.

I could create a canvas with the size of the viewport and let it render when the user scrolls, I don't know if this will be any faster, there's a smaller canvas but it needs to rerender more. For the table I could use fixed cells where the notes get put in (addChild, innerHTML) when they have to be showed but there won't be any smooth scrolling because it could only scroll by grid size (not a really big issue if it's fast enough), and would also require more re-rendering than a static table.

Is there something i overlooked and which solution is most resource friendly?

Answer 1

I wouldn't touch tables here for both the reasons you mentioned and also it'd be hacky getting the black keys nicely inset.

I'd lean towards canvas, because its really fast and your resource usage is fixed: just the pixels for the piano roll. Piano keys are also rectangular so picking logic wouldn't be too bad.

However, if you do prefer to have keys as objects with events then, as abesto mentioned, vector graphics are the way to go. d3.js mbostock.github.com/d3/ is a nice JS library for DOM-based visualization that could help with creating the roll, assigning events to keys, and smoothly animating it scrolling. You could use it to render HTML (DIVs, say) or SVG.