Framerate in HTML canvas ("Color Piano" app)

Question

I would like to make a webpage with a "piano roll", here's a rough visualization (without some planned customizations):

Basing it on Color Piano might be promising because it allows uploading a MIDI file and plays the audio smoothly.

However, Color Piano doesn't move the piano roll smoothly visually. The distance that the bars travel is different in each frame, and/or the frame rate is low, and/or the duration of frames is inconsistent. You can see that if you look closely on the original page (might depend on your hardware) or in videos.

There are piano roll apps that run more smoothly (on the same hardware) using canvas, for example Piano Roll from Chrome Music Lab. (But they don't directly allow to select an own MIDI file.)

Why is Color Piano not smooth? Can it be easily salvaged by fixing some bug, or is it deeply based on some outdated technology?

Answer 1

It is impossible to say with certainty without analyzing the source.

However, by profiling you might notice it is not a terribly intensive application:

So I opened the min/app.js file in my text editor, and after some cursory searching, I noticed that it does attempt to polyfill requestAnimationFrame:

window.requestAnimationFrame || (window.requestAnimationFrame = function () { return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (b, a) { window.setTimeout(b, 1E3 / 60) } }());

However, searching does not result in any other ocurrence of requestAnimationFrame, so I guess they're using setTimeout or setInterval for their render loop, which is notoriously unstable.

So the most straighforward "fix" would be to replace the unspecialized timers with requestAnimationFrame, and drive the animations using the timestamp provided in the callback.

This doesn't mean it's the only ocurrence of non-synchronized drawing, however, but it is certainly a good start.