Groovie is a new open-source, fully static web-based drum machine and beat sequencer built with JavaScript. It features 150+ samples, up to 32 patterns, a timeline view for sequencing patterns over time, polyrhythm support, per-sample effects (filter, delay, volume, panning), and a responsive UI usable on mobile. A key engineering challenge was encoding entire projects into URL fragments under a 2000-character limit. The author achieved this using multiple strategies: variable-length prefix codes for pattern rows, run-length encoding for the timeline, gating bits for default settings, and motif repetition detection. The app also supports MIDI clock output via the Web MIDI API (Chrome/Chromium only), enabling sync with external hardware like synthesizers.
Questions this post answers
How can I encode large amounts of state into a URL fragment to keep links shareable on social media?
Targeting a 2000-character total URL limit leaves roughly 1800 characters for the fragment. Using base64url encoding gives 6 bits per character, yielding about 10,800 bits. Techniques to stay within budget include variable-length prefix codes to select among multiple encoding strategies per data row, run-length encoding for sparse timeline data, gating bits to skip default values, and motif-repetition detection for periodic patterns. Developers compressing app state into shareable URLs discuss encoding trade-offs like these on daily.dev.
Does the Web MIDI API work in Firefox and Safari?
The Web MIDI API is supported natively in Chrome and Chromium-based browsers. Safari does not support it. Firefox requires users to manually install a plugin to enable Web MIDI support on a per-site basis, making it significantly more cumbersome to use than Chrome. Browser API compatibility decisions like this affect real projects — developers tracking Web MIDI support share findings on daily.dev.
33.3K Impressions1 Comment