Experimenting with gatsby-remark-music

Estimated reading time: ≈2min

gatsby-remark-music is a Gatsby plugin that allows to easily add music sheets to your Gatsby site by using the abc notation. More specifically, it uses the abcjs library to render the abc notation to an SVG.

Here’s a little example:

Sheet Music for "Clouds Thicken"Clouds ThickenCreepy JigPaul Rosen= 116EmC7EmC7B7EmC7EmD (Bm7)EmEmEm2GEmDEmGEmDEmSource: Copyright 2005, Paul Rosen

The rendered SVG is configurable by passing to the plugin the abcjs configuration options. There is also an additional option - the color option - that allows to customize the color of the output SVG. Since the SVG is styled with CSS, you can also use CSS variables to make the color dynamic.

For example, this blog automatically switches between dark and light themes based on your system theme. The gatsby-remark-music plugin has been configured to use a CSS variable that changes when the system theme changes, so you will be able to see these music sheets in any case.

Note that the abcjs library is still far from being perfect, especially when the responsive mode is enabled. For example, this is what happens when trying to write a more complicated music sheet:

Sheet Music for "Auld Lang Syne (Original Version)"Auld Lang Syne (Original Version)Traditional (Scotland)Melody1Should2We3We4And5Andauldtwotwohere'ssure-DVersesac-haehaealyquain-runpaid-hand,ye'llAtancea-eltmybebeboutintrus-yourDfor-thethetypint-got,braes,burn,fere,stoup,AandandfraeandandHarmonynev-pu'dmorn-gi‚ssure-Dertheinalybroughtgo-sunhandI'llEmtowanstillo'bemind?fine,dine,thine,mine,GShouldWe'veButWe'llWe'llauldwan-seastak'takeDac-deredbe-aaquain-monytweenrichtcupAtanceausgudeofbewea-braidwil-kind-Emfor-ryhaelienessgot,foot,roared,waught,yet,AInsin'sin'Forfordaysauld_auld_auld_sakeof ofauldlang_lang_lang_auldlang langsyne?syne.syne.syne.syne.Forauld_DRefrain lang_A syneDmydearAforauld_D lang_Em syne.GWe'lltak'DacupAo'kind-EmnessyetAforauldlang_ syne.AauldAlang_Em  A syne.D12

Cover by Marius Masalar on Unsplash

Giorgio Garasto

Hi! I'm Giorgio Garasto, a Software Engineer trying to make the web a better place since 2004.