Coming Soon – Web-based Version of Rhythm Lab
Coming Soon – Web-based Version of Rhythm Lab

Coming Soon – Web-based Version of Rhythm Lab

In Progress: I’m working on a web version of Rhythm Lab using Flutter / Dart as the development platform. Since I’m coming from the Apple dev world (Objective-C / Swift), I’m having to learn the Flutter / Dart platform as I go. The goal is to have a web-based version (“lite” and free to use) of Rhythm Lab – a Progressive Web App (PWA) – that can (theoretically) work on any platform. The web presents certain hurdles that would make a full-blown Rhythm Lab app with all of the bells and whistles very difficult, if not impossible, to reproduce.

With Flutter, I’m having to rethink many things. The first issue is just how to render the rhythm patterns. On iPadOS, I can render the patterns as vector-based graphics (Bezier Paths) where the individual glyphs of the Bravura Font can be rendered as paths. The spacing is based on a rather complex algorithm that uses a logarithmic formula to figure the distances for any number of voices (from one to three voices specifically). For the web, with Flutter, I am figuring out how to render the font glyphs as svg images. Not as straightforward as you would think! At least, it’s taking me a while to get to a satisfactory solution.

Another issue is timing. I’ve been checking out various timing / metronome tutorials, such as this one on creating a tap metronome using tone.js. Sloppy / general timing can be OK for some musical applications, but once you get down to precise timing for a wide range of note values, the timing needs to be tight and the latency minimal. So for the web version of Rhythm Lab will need to have “sloppy” (i.e., loose tap precision) timing when evaluating taps from the keyboard, tap screen, or a MIDI device. The reason for this is that javascript-based timing is “slower” (because of latency) than native-based timing on a device such as the iPad. It will be interesting to see if the Flutter-Dart system can provide better latency, even in a web app.