Music as Markup

Overview

Sheet Music and HTML share some crucial commonalities. They are both a series of relatively basic steps or instructions that if followed precisely render a complex finished product. More importantly the elements of both sheet music and HTML have a series of parent/child/sibling relationships.

Goals

The primary goal of this project is to define a convention for creating sheet music using HTML5 custom data attributes which describes the parent/child/sibling relationship between all symbols on a musical document thus allowing the construction of a Document Object Model. A secondary goal is to create a suite of jQuery functions that allow the user to traverse and manipulate this musical DOM.

Usage

Get a modern browser

First things first—make sure you’re running a modern browser. My favorite is Chrome but any of the most recent versions of the following will do: Firefox, Safari, Opera, IE9

Including jQuery & audiofile.js

Next grab the latest copy of jQuery and audiofile.js and include a link to both of them in your HTML <head> section.

Include a <canvas>

To see your markup visualized as music remember to always include a canvas. For now all of the code is hardcoded for a canvas of at least 400px tall. In the future the plan is to make it more dynamic.

Create the staff and paint the notes on the canvas

To visualize the markup as music call the audiofile(); function that is part of audiofile.js.

audiofile(); will draw the staff lines to be whatever width was specified in the <canvas>. It also draws all notes on the canvas in the approprate spot as well as drawing the staff lines and key/time signatures.

The final step is to pass in an object literal of settings. You can currently set the tonic, bpmeaure, count, title, and creator.

Language

Set the tonic

To set the tonic for the piece pass an integer value between -7 and 7 into the settings object. Audiofile supports the entire circle of fifths. 0 = C, -7 = C flat, and 7 = C sharp.

Set the time signature

To set the tonic for the piece pass an integer value for the beats per measure (bpmeasure) and the count. The bpmeasure will appear on the top and the count will appear on the bottom when painted on the canvas.

Title and Creator

You’ll surely want to tell the world who created your masterpiece. You can do that by passing in a string for both the title and creator into the settings object. This will appear below the staff on the top row.

Markup to define the DOM

There are 8 octaves on the keyboard. Each octave is 12 notes. For example 1 octave in the key of C is: C, C#, D, D#, E, F, F#, G, G#, A, A#, B. Between one note and the next is called a half-step.

Therefore to both set an individual note or rest’s pitch we give a custom data attribute a value between 0–11.

A measure of happiness

A measure is extremely common in music. Each note will descend from a measure directly or indirectly via a chord. The convention is to start numbering the measures at 0.

Take note

Audiofile currently supports notes and rests up to and including thirtysecond notes. To specify the length of a note use the data-note attribute. Valid values are:

octave & pitch

As noted previously there are 8 octaves on the keyboard. Each octave is 12 notes. For example 1 octave in the key of C is: C, C#, D, D#, E, F, F#, G, G#, A, A#, B. Between one note and the next is called a half-step.

The pitch of a note is a combination of it’s data-octave attribute which tells which octave the note is in (0–8) as well as the data-pitch attribute which tells the note’s location within the octave. Remember that all counting is zero indexed and starts with 0. So in the key of C—C would be 0 and the B nearly one octave higher would be 11.

chord

When more then one note is played at the same time they descend from a chord.

The jQuery API to traverse and manipulate the musical DOM

Audiofile.js features several nice and easy functions that allow the user to take a piece of music further than before. This combined with jQuery allows complete control over the structure of a piece of music.

CAVEAT: In keeping with the jQuery plugin authoring guidelines I have namespaced all of the audiofile.js custom functions within the .audiofile() namespace. As such to call these custom functions you will need to call the audiofile() function first and pass in the name of the custom function as the first argument and then any arguments that you intend to pass into the custom function as the remaining arguments. Because of a minor bug in the current implementation you will need to make the very first argument a blank string to take the place of the settings object that you aren't passing in. Hopefully an example will clear everything up:

stepUp();

stepUp(); takes two arguments. The first argument is the note or notes to grab. The second argument is the number of half steps to step up 0–11.

stepDown();

stepDown(); takes two arguments. The first argument is the note or notes to grab. The second argument is the number of half steps to step down 0–11.

stepUpWhole();

stepUpWhole(); takes one argument. The argument is the note or notes to grab. The note or notes selected will be stepped up one whole step or two half steps.

stepDownWhole();

stepDownWhole(); takes one argument. The argument is the note or notes to grab. The note or notes selected will be stepped down one whole step or two half steps.

stepUpHalf();

stepUpHalf(); takes one argument. The argument is the note or notes to grab. The note or notes selected will be stepped up one half step.

stepDownHalf();

stepDownHalf(); takes one argument. The argument is the note or notes to grab. The note or notes selected will be stepped down one half step.

stepUpMaj();

stepUpMaj(); takes two arguments. The first argument is the note or notes to grab. The second argument is the number of steps in a major scale to step up 0–7. Remember that the steps of a major scale are whole, whole, half, whole, whole, whole, half.

stepDownMaj();

stepDownMaj(); takes two arguments. The first argument is the note or notes to grab. The second argument is the number of steps in a major scale to step down 0–7. Remember that the steps of a major scale are whole, whole, half, whole, whole, whole, half.

stepUpMin();

stepUpMin(); takes two arguments. The first argument is the note or notes to grab. The second argument is the number of steps in a minor scale to step up 0&ndash7;. Remember that the steps of a minor scale are whole, half, whole, whole, half, whole, whole.

stepDownMin();

stepDownMin(); takes two arguments. The first argument is the note or notes to grab. The second argument is the number of steps in a minor scale to step down 0&ndash7;. Remember that the steps of a minor scale are whole, half, whole, whole, half, whole, whole.

About

Who

audiofile.cc is a DIY project for music and code makers worldwide. The project was created and is currently being led by Carlos Cardona but others have helped greatly along the way. Contributors include:

If you’re interested in helping out here is the audiofile.cc wishlist:

Browser font detection
The elements being painted to the canvas (clefs, notes, rests, accidentals) were all hand drawn by myself in canvas. I have implemented code which displays the beautiful Unicode characters for each of the musical elements. However it doesn't work consistently across all browsers and OS's (surprise :p ). We should add the functionality to detect a browser/OS's font support and serve them the Unicode characters if they support it and fallback to the hand drawn elements if not.
Open source Musical Font
Music as markup is a movement that is only just beginning. As we grow we are going to need a good quality font that we know is licensed appropriately. That is why I propose that we build our own! ;-) Ideally it would be a font that can be used via @font-face to deliver the fonts to as many browser/OS combos as possible.

Please join us! ;-]

Need help or got a suggestion? Find me in #audiofile on Freenode IRC.

What

Music and technology are evolving and converging in extremely interesting ways. This project aims to create a smoother interface for creating dynamic and intelligent musical compositions.

When

This project was conceived last year but languished on the backburner of my mind. Recently it was recast in Mighty HTML5 to last the ages.

Where

Carlos is based out of San Francisco, CA but music and code flow from hearts and minds all over the planet.

This software is free and licensed under the MIT Open Source License.

For more projects by Audiofile please check out Boombox.js & Boombox for Chrome™.