Note Animation with SVG

[Christophe Thiebaud]

Subject: Note Animation with SVG — project, lessons, and a proposal

Dear LilyPond users,

I'm a long-time LilyPond user and (formerly) a professional software developer — now retired, with more time for musical experiments and hobbies. I recently completed a small side project: animating a score in sync with its audio, using the SVG output from LilyPond.

https://bwv1006.cthiebaud.com/

The idea is simple: highlight each note in the SVG score as it is played in real time. The implementation, however, turned out to be... less simple.

Attempt 1: Modify LilyPond

I initially tried to implement this inside LilyPond, attempting to inject custom attributes into the SVG output to aid synchronization. But I quickly realized that diving into LilyPond’s internals (especially via Guile) would be a steep climb. I gave up that route, for now.

Attempt 2: External toolchain

So I switched back to Python. I wrote a set of scripts to:

• extract and map notehead positions from SVG,

• parse the MIDI events,

• synchronize them based on a shared origin,

• generate real-time visual playback in a browser.

The result is working and public, but the pipeline is too complex and fragile for casual reuse.

https://github.com/cthiebaud/bwv1006

Proposal

Since both the SVG and MIDI are generated from the same LilyPond source, it would be immensely helpful if LilyPond could optionally inject some minimal linking information — e.g. per-note IDs or timestamps — in both outputs. That would dramatically reduce the complexity of reconciling notes between formats.

I'm not proposing that LilyPond take on full animation support — just to explore modest features that make post-processing easier (for example: optional <a> tags with meaningful ids, or more structured \tag propagation into output backends).

Question for the community

Would anyone else be interested in this kind of use case? Has something similar been attempted before? If there is sufficient and benevolent feedback from the community, I could ask for help from the developer community to resume the attempt 1 to modify Lilypond.

Warm regards,
Christophe Thiebaud
(Bologna, Italy)