Musical Markup Language V0.6.1

by .rhavin;)

The Musical Markup Language (MuML) brings you the power to share simple inline notation in HTML-pages by using a simple code. The base unit is the ♪ (eighth) and that is represented by a one: |11111111|11111111| becomes:


MuML base syntax

MuML currently interprets the following notes, rests and symbols:

sixteenth "
sixteenth rest
double sixteenth '
eighth rest
eighth ;
quarter rest
double eighth |
bar line
quarter !
barline (line-break)
half [
opening repeat
whole ]
closing repeat
augmentation dot _
  space escapes note coupling /
bar filling chord
bar repeat \escape char
{begin of text/chord }end of text/chord

So a simple musical phrase may be encoded like this:[8|2.2.2|41'2.]:


MuML chord syntax

With the braces { and } you may add any arbitrary text to the bars and chord-symbols to the notes that become formated and displayed above the line. place the braces right after the object to anotate:


Currently A-G (capital letters!) and X (for generic chords) are supported, future versions will add support for a0 to g9 for single notes in oktave 0 - 9. You may also use #/♯, b/♭,bb/♭♭, ♮ and x/× (this is just for demonstation, if it sounds bad, dont blame me ;-) … |4{C7/9}3{FΔ}1{Eb5}_|8|:


it is for simple parts even possible to use compact lead-sheet annotation: |/{C7/9}|%|/{FΔ}|/{Eb5}|


Inline Chord Annotation

Another feature of MuML is its ability to understand and transform simple inline annotation in text:

	<p>{B}Do you think me gentle,{F#} do you think me cold?<br/>
	d{C#}o you wanna risk a lo{G}ok into my thoughts? {F#}<br/>
	{B}’neath the warm green valleys i{F#}n the silent depth<br/>
	{Am}- some things remain forever the{G#m}re… {G#}</p>


{B}Do you think me gentle,{F#} do you think me cold?
d{C#}o you wanna risk a lo{G}ok into my thoughts? {F#}
{B}’neath the warm green valleys i{F#}n the silent depth
{Am}- some things remain forever the{G#m}re… {G#}

How to use

If you're not shure if your users have a font installed that already supports the unicode range of musical symbols (few do!), you should copy this font into the same directory as your css (otherwise, firefox-users may have problems). If you see the following symbols, the font has already been dispatched to your local system:

𝄀 𝄁 𝄂 𝄆 𝄇 𝄈   𝄋 𝄌 𝄎 𝄏 𝄪 ♯ ♮ ♭ 𝄫 𝄻 𝄼 𝄽 𝄾 𝄿 𝅗 𝅘 𝅜 𝅝 𝅗𝅥 𝅘𝅥 𝅘𝅥𝅮 𝅘𝅥𝅯

		<script type="text/javascript" src=""></script>
			/* this font provides the notes in the correct UnicodePoint, use your own server! */
			@font-face { font-family: UniMusic; src: url(; }
			/* this class formats the elements (single notes, rests etc.) */
			.QMuML_E {font-family:UniMusic;}
			/* these classes format the chords (A) and barline-texts (B) */
			.QMuML_A,.QMuML_B {font-size:60%;}
			/* this is a single line (parts between exclamation marks) */
			.QMuML_L {}
	<!-- tell the script what containers it should transform ('div') and what classes to look for ('bar') in your actual page, thats all ;) -->
	</head><body onload="Q.MuML.barsCreate('div','bar');">
	. . .

Your actual container may provide a data-f-attribute to specify an arbitrary factor to scale each notes space horizontally. See the sourcecode of this document for usage. Enjoy!

If u like it and wanna use it: paypal just 5€ to rhavin (at) ;)