Rhythm

Live: https://kenan.schaefkofer.com/rhythm/

A tiny webapp for typing, practicing, and sharing rhythmic exercises: write ABC notation, see it as sheet music, press play to hear it, and follow a bouncing ball that hops from lyric syllable to lyric syllable (karaoke style).

Built by forking abcjs's editor + synth demo, then adding the lyric-following ball and shareable URLs.

Deployed as a static GitHub Pages site (repo kenakofer/rhythm, Pages from main branch root; published under the user site's kenan.schaefkofer.com custom domain).

Features

• Live ABC → notation rendering (edit the textarea, the score updates)
• Audio playback via abcjs's synth: play / pause / loop / restart / progress / tempo
• A bouncing ball that follows the w: lyrics during playback; the current note is highlighted
• A metronome (on by default, accented downbeat) with independent volume sliders for the music and the metronome click
• Long tunes render on one line and the view auto-scrolls horizontally to follow the ball (karaoke-scroll)
• Shareable links: the notation and mix settings are compressed into the URL (?state=…); "Copy share link" puts a full link on your clipboard, and opening it restores everything

Running

No build step. Just serve the folder statically:

python3 -m http.server 8000
# then open http://localhost:8000

(Opening index.html directly via file:// won't work because it uses ES modules and the clipboard API — use a local server.)

Layout

• index.html — app shell (textarea, #paper notation, #audio transport)
• styles.css — layout, note highlight, bouncing-ball styles
• js/app.js — bootstraps abcjs Editor + SynthController; wires the ball and URL state
• js/bouncing-ball.js — the CursorControl that hops the ball lyric-to-lyric
• js/metronome.js — builds the abcjs drum pattern for the metronome click
• js/state.js — lz-string URL compression for shareable links

abcjs and lz-string are loaded from CDN (jsDelivr); there are no local dependencies.

Ideas / not yet done

• An automated test suite