<musical-note>

<musical-note> is a custom HTML element for a musical note in treble clef.

Install

Download the musical-note.js file from this repo using the 'Download' button and load the file into your page's HEAD section. The script can also be referenced directly from github:

<script src="//pianosnake.github.io/musical-note/musical-note.js"></script>

Usage

In your page's BODY define a note by name and octave in the value attribute.

<musical-note value="d#4"></musical-note>

Define using a MIDI note number. Middle C is 60. C# above that is 61.

<musical-note value="61"></musical-note>

Sharps are used by default, but the flat attribute will ensure the note is drawn using a flat.

<musical-note value="61" flat></musical-note>

Create a taller container by specifying a height attribute.

<musical-note value="66" height="300"></musical-note>

The tags can be referenced like any other HTML elements.

<musical-note value="c3" id="myNote" height="160"></musical-note>

var note = document.getElementById("myNote");

Change the value of an existing note using the setValue method. Sharps are used by default, but if the second parameter to setValue is set to true, the note will be drawn using a flat instead of a sharp.

note.setValue(60, true);

Get the value of a note using getValue()

Get the numeric value of a note getNumericValue()