HTML5 Web Application Development By Example Beginner's guide

Time for action – adding notes

Let's write the addNote() method that was referenced by onAudioEvent() in the previous section. This method takes one parameter, the name of the note to add:

function addNote(note)
{
    noteCount++;
    // Add a new note element
    var $note = $("<div class='note'></div>");
    $note.data("note", note);
    $notesPanel.append($note);
    
    var $key = getPianoKeyElement(note);
    // Position the note element over the piano key
    $note.css("top", "0")
         .css("left", $key.position().left)
         .css("width", $key.css("width"));
    
    if ($key.hasClass("black"))
    {
        $note.addClass("black");
    }
}

First we update the noteCount variable to keep track of statistics. Then we create a new note <div> element using jQuery, and give it a class of "note". We set the data-note ...