Plain Text Musical Notation

Non-Javascript fallback.

Musical notation looks beautiful but is also really & complicated to write out, let alone render by code.

This tiny script attepts to create an almost markdown type of musical notation in plain text. It uses inputs from HTML5's figure element to render up a final output which can be copypasted for all your needs. Below are some examples for your satisfaction.



Examples

Basic

    <figure data-notation="efGABCDEFe#f#G#A#B#C#D#E#F#"></figure>
  

With No-Script Fallback

Javascript is required for this! :(
  <figure data-notation="efGABCDEFe#f#G#A#B#C#D#E#F#">
   Javascript is required for this! :(
  </figure>

Notified

<figure 
  data-notation="efGABCDEF e#f#G#A#B#C#D#E#F#" 
  data-notify="true"></figure>

Notified with Custom Notes

<figure 
          data-notation="efGABCDEF e#f#G#A#B#C#D#E#F#"
          data-notify="true"
          data-alt-notes="Xs"
          >
  </figure>

Custom Markup

  <figure 
          data-notation="efGABCDEF e#f#G#A#B#C#D#E#F#"
          data-padding="..,  "
          >
  </figure>

Limited & Custom Staff

 <figure 
          data-notation="ZZZ#Y efGABCDEF e#f#G#A#B#C#D#E#F#"
          data-staff="A,B,C,Z,Y"
          >
  </figure>