Use HTML5 canvas and custom attributes to create a piece of sheet music. Then use jQuery to do cool things to it. Digital music just changed.
Check out this free parental control and monitoring program (Hoverwatch) for computers and smartphones. Record your children’s calls and know what they do on social networks.
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.
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.
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
Next grab the latest copy of jQuery and audiofile.js and include a link to both of them in your HTML <head>
section.
<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.
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.
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.
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.
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.
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.
measure
of happinessA 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.
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:
whole
half
quarter
eighth
sixteenth
thirtysecond
wholerest
halfrest
quarterrest
eighthrest
sixteenthrest
thirtysecondrest
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
.
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.
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:
Please join us! ;-]
Need help or got a suggestion? Find me in #audiofile on Freenode IRC.
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.
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.
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™.