About GrooveScribe
Create, practice and share drum grooves.
What it's for
GrooveScribe was built to help drummers create, practice and share grooves.
- A simple interface allows easy groove creation that automatically creates printable sheet music for printing and sharing.
- MIDI playback with tempo and a metronome makes it easy to hear and practice difficult grooves.
- Sharing is simple with a URL, and the recipient can view the groove in any web browser.
How it works
GrooveScribe is written in HTML and JavaScript and runs entirely in the browser. ABC Notation is used to create the printable sheet music. When notes are changed on the screen, new ABC Notation is generated, which creates the sheet music.
To play the music, GrooveScribe generates a MIDI file and plays it using the browser audio interface. The soundfont used by the MIDI player uses custom drum samples from Mike Johnston's kits.
All of the icons and images used by and created for GrooveScribe are SVG or fonts, so the interface scales to any resolution with no scaling artifacts. Try zooming in on the page to check it out.
How it swings
The swing slider controls the amount of "swing" that is added to the playback. It does not affect the printable sheet music. To generate swing, a delay is added to the upbeat notes in the measure. The upbeat notes are the "a" and the "e" in a 16th note groove (1 e & a), and are the "&" notes in an 8th note groove (1 & 2 & 3 & 4 &).
During MIDI generation, the program extends the duration of the downbeat notes and shortens the duration of the upbeat notes. The swing percentage controls the percentage of the note duration that the upbeat is delayed:
NewDelay = NormalDelay + (NormalDelay * SwingPercentage)
People
- Lou Montulli — the programmer.
- Mike Johnston — the inspiration for this app. Major feature and design collaborator.
- Brad Filip — graphic design.
Open source
GrooveScribe is open source and is licensed under the GPL v2.0. The source code is available at GitHub.
Built with
GrooveScribe is plain HTML, CSS and JavaScript (native ES modules, no build step). These open source libraries and resources are included in it:
Notation and music
- abc2svg 1.3.2 — turns ABC Notation into the sheet music. GrooveScribe could not exist without it. Thank you Jef!
- ABC Notation — the text format the sheet music is described in.
- jsmidgen — creates the MIDI files.
- MIDI.js 0.3.2 — plays them with Web Audio, together with jasmid for reading MIDI files.
- unmute — lets playback through the iPhone and iPad silent switch.
- Mike Johnston's drum kits — the custom samples behind the soundfont.
Interface
- Font Awesome 4.7 — icons.
- Lato — typeface, served by Google Fonts.
- Share Button — sharing to social sites.
- Pablo — converts the sheet music SVG to PNG for download.
Mobile apps
- Capacitor — packages GrooveScribe as Android and iOS apps.
Development
- Vitest, Playwright, ESLint, Prettier and TypeScript — tests, linting, formatting and type checking.