Plain Text Musical Notation

Non-Javascript fallback.

Musical notation looks beautiful but is also really tricky & 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.

Just include <script src="ptmn.js" ></script> at the bottom of your page and the rest will just work. Download the script here.



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>

With Bars

  <figure data-notation="ABCD | EGHd | AB#CD#">
  </figure>

Notified

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

Notified with Custom Notes & Bars

<figure 
          data-notation="efGA | BCDEF | e#f#G#A# | B#C#D#E# |"
          data-notify="true"
          data-alt-notes="X,s,*"
          >
  </figure>

It's best to use an astrisk for the bar symbol when using the notified mode.
This is due to many monospace fonts not kerning unicode symbols correctly, leading to visibily unstraight bar lines.
If you only want to change the bar symbol just use data-alt-notes=",,*".


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>