Using JavaScript, this guitar tab player converts the music note data from a MusicXML file to frequencies playable by the Audio Data API. This note data is also converted to a format that can be read by Vexflow to display the guitar tab.

I have broken down this functionality into 4 steps. Here’s how the HTML5 Guitar Tab Player works:

MusicXML

When a tab (a tablature) is selected, the jQuery ajax() function loads the MusicXML file, parses through the contents, and appends all the formatted note data to a <script> tag. The format for each note is: playNote(note, octave, duration).

playNote(notes.C,4,1);

The tablature notation information in the MusicXML file is also processed and appended to a <div> tag for Vexflow.

Here is the structure of the nodes I am using from the MusicXML file:

<measurenumber="1"><attributes><divisions>1024</divisions></attributes><note><pitch><step>C</step><octave>4</octave></pitch><duration>1024</duration><notations><technical><fret>1</fret><string>2</string></technical></notations></note>
the note node repeats for the rest of the notes in the measure…
</measure>

And here is the generated source that is produced by the ajax() function.

And to incorporate that a note can be played at different octaves I have adapted the above formula to the following:

frequency = 440 * 2^((octave-4) * 12 + distance)/12);

Audiodata.js

I am using the Audiodata.js library in the guitar tab player which makes it easy to play continuous audio using a single array. This library encapsulates the Audio Data API methods. Audiodata.js is available on GitHub here: https://github.com/notmasteryet/audiodata. The Audiodata.js project contains a score example with “Twinkle, Twinkle, Little Star” which inspired me to build this guitar tab player.

Vexflow and the Animated Cursor

Vexflow is an open-source web-based music notation rendering API based on the HTML5 canvas element (http://www.vexflow.com/). I am using Vexflow to display the tab for each MusicXML file. I have added an additional canvas element on top of the Vexflow canvas to control the red cursor that links the audio to the tablature. The speed of the audio is controlled by the tempo which is measured in beats per minute. By converting this tempo to milliseconds I am able to use it for the redraw speed of the second canvas. Every time this canvas is redrawn the red cursor is moved 5 pixels to the right to highlight which note is currently being played.
Keep in mind that this HTML5 Guitar Tab Player is just a proof of concept and can only play single notes.

“This is great! A few bugs: The stems are technically incorrect (from third line up the stem goes down not up) and there aren’t natural signs where there should be (G Minor Solo, the D# and D). I assume it’s the player’s problem and not the XML, if I’m not mistaken.”

Yes, these are bugs with the demo and not the XML. Vexflow, the music notation app used in the demo, does not support auto-beaming and does not automatically assign natural signs where it should. I just found out about alphaTab.net which is another music notation app which supports both of these features and will be used in the next release of the guitar tab player.

It’s strange that sharps and flats don’t stay in effect for the duration of the bar they’re in. For example, in the last piece, the Gm solo, the 4th bar looks like it should only have 2 distinct pitches, but it’s played like there are four.

Great start point for using HTML5 new featuers. Thank you so much. I’d like to use your invention on my website.
Also I’d like to create some educational articles about music soon. You can see a sample of an article at CSS3 Multi-Column Layout Module.
In my tutorials, I would use these libraries and APIs.
Thank you again.