In a Nutshell…
<pre> tag) parses it, and writes some HTML — for the song (lyrics) and reference chord diagrams — relying on CSS to make the song pretty.
<canvas> element. The data for what a chord looks like, the “chord library”, lives in a large-ish JSON array (bundled within the Scriptaraurus library). A few rather simple regular expressions pull the chords out of the raw music text, creating an array of the distinct chords used. Then a simple replacement is made on the music — this inserts a
<code> tag around the chords.
The major drawback to <canvas>, aside from IE, is text. Adding Text to canvas is inconsistently supported across browsers.
Using Scriptasaurus on Your Website
Download the complete, zipped project from GitHub and immediately pop open that readme!