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
custom attribute to the name of the note. We will need that later when it reaches the bottom of the panel to know which note to play. Lastly, we add...