Technical Overview

In a Nutshell…

The core to all UkeGeeks tools is “Scriptasaurus” — a JavaScript library that reads a song (one wrapped in a <pre> tag) parses it, and writes some HTML — for the song (lyrics) and reference chord diagrams — relying on CSS to make the song pretty.

The JavaScript draws each chord fingering diagram on its own <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.

That’s it.

The major drawback to <canvas>, aside from IE, is text. Adding Text to canvas is inconsistently supported across browsers.

Using Scriptasaurus on Your Website

If you want to add Scriptasaurus to your website you’ve two options: attaching the JavaScript to your pages, what we’ll refer to as the “static HTML” option, or using the PHP Songbook Application.

Rather than going into installation here I’ll just refer you to the MarkDown formatted (included in the files available via GitHub)

Download the complete, zipped project from GitHub and immediately pop open that readme!