The final project in my 1st year web development class is to design and develop a site to teach a skill. This semester, several students are creating sites with musical themes: how to play guitar, read sheet music, etc. That got me thinking: what’s the best way to create musical notation on a modern website?

Most digital sheet music is delivered in a format that’s indistinguishable from the bound papers we remember from childhood lessons, only locked into PDFs. To present musical notation in an accessible, usable way on the web, we need to take a different approach.

Musical Characters

Most developers don’t realise that there are dozens of musical symbols buried in most typefaces, easily accessible through codes or a glyph. While not enough to reproduce a complex score, these symbols are enough to render basic musical phrases on web pages.

So long as you’re encoding your page in UTF-8, you should be able to simply copy and paste the glyphs directly into your markup:

<li>♪</li>

You can take the same approach with CSS generated content:

li:before { content: "♯"; }

For the sake of convenience, I’ve also included the decimal and hexadecimal entities for each glyph; these should be used if with JavaScript or in MySQL, as using Unicode characters can cause errors if they are inserted directly into MySQL feilds.

Notes, Flats, Sharps & Clefs

Pauses, Bar Lines, Sound Levels & Repeats

You will tend to find better support for musical notation symbols on OS X than Windows, particularly in the six-digit decimal entity range. The basic symbols - quarter notes through to the sharp symbol - have good support across all platforms and browsers.

One significant advantage of using these entities is their built-in support for accessibility: many text-to-speech converters will read the quarter-note symbol as exactly that. However, their severe limitations across platforms mean that they can't be used for crafting realistic sheet music: you should probably consider these entities for decoration, rather than information.

There are a few more music symbols that are common in typefaces (at least on the Mac side), but I’m going to assume that most readers aren’t interested in using mensural notation to represent medieval choral music.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/PwXqYO