Mozilla

HTML5 Guitar Tab Player with the Firefox 4 Audio Data API

Greg Jopa, an Illinois State University grad student studying web development, built a web-based guitar tab player using Firefox’s Audio Data API and Vexflow (HTML5 music notation rendering API). Here is some details from Greg. You can also read more about this experiment on his blog.

I created a mashup using the Firefox 4 Audio Data API, MusicXML, and Vexflow to create a HTML 5 Guitar Tab Player.

This is a Youtube video. It uses the HTML5 <video> tag if you activate it here.

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:

<measure number="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.

For the audio:

<script id="audio" type="text/javascript">
	function loadAudio(){
	  playNote(notes.C, 4, 1);
	  playNote(notes.C, 4, 1);
	  playNote(notes.G, 4, 1);
	  playNote(notes.G, 4, 1);
	  …
	}
</script>

For the tab:

<div id="tab" class="vex-tabdiv" width=780 scale=1.0 editor="false">
tabstave notation=true
	notes :q 1/2 :q 1/2 :q 3/1 :q 3/1 | :q 5/1
   …
</div>

Frequency Calculation

When the Play button is clicked the music data <script id=”audio”> tag is evaluated and the note information is converted to frequencies using the following formula (assumes equal temperament):

frequency = 440 * 2^(n/12)

440 is the frequency for the note A at the 4th octave.

n = distance away from A4 (440)

I am using an array to store the distance between a certain note and the base note “A”

notes = {C:-9, Cs:-8, D:-7, Ds:-6, E:-5, F:-4, Fs:-3, G:-2, Gs:-1, A:0, As:1, B:2};

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.

If you have recommendations on how to make this tab player better or would like to contribute to this project check out the following post: http://www.gregjopa.com/2010/12/html5-guitar-tab-player-with-firefox-audio-data-api/

11 comments

Comments are now closed.

  1. Patrick wrote on January 7th, 2011 at 15:27:

    That is pretty spiffy.

  2. DaDude wrote on January 7th, 2011 at 17:56:

    Freebird!!! That is awesome!

  3. Edward wrote on January 7th, 2011 at 20:36:

    posted this on HN, but thought it would be more helpful here:

    “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.”

    1. Greg wrote on January 10th, 2011 at 09:41:

      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.

  4. Jason wrote on January 8th, 2011 at 08:02:

    Something wrong with the notation in that demo. An accidental is valid for the remainder of the measure it occurs in.

  5. Brian wrote on January 8th, 2011 at 10:34:

    That’s really cool.

    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.

  6. Gaurav Mishra wrote on January 11th, 2011 at 01:04:

    Make me surprise! :D

  7. Saeed Neamati wrote on June 5th, 2011 at 01:12:

    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.

  8. Michael wrote on September 5th, 2011 at 15:34:

    That is awesome! I can’t wait to see HTML5 used for sites to preview sheet music. I hate waiting for their versions to load.

    Also props on the smooth red bar moving along. That’s a nice feature to teach kids’ eyes to move quickly.

  9. 01d wrote on August 1st, 2012 at 22:34:

    G minor with an A# and D#? You need two flats in the key signature instead!

    The fingering for the D note on the second measure is the seventh fret. Instead, it seems like it would be easier to play all in third position.

    The loadXML file uses:

    // reformatted to use spaces.
    $(document).ready(function() {
    loadXML($(“input[name=’tab’]:checked”).val());
    });

  10. Gianca wrote on March 31st, 2013 at 10:41:

    Very cool!! I really like HTML5 audio functionality.
    I build something like this, you can see it at:
    http://www.fachords.com

    feel free to ask any questions!!!

    ciao from Italy

Comments are closed for this article.