Web Pages with musical examples...

Through the music21 Javascript port, music21j, any webpage can now include (simple) musical examples easily.  Copy and paste the following code somewhere in the webpage:

<script data-main="http://web.mit.edu/music21/music21j/src/music21"
        src='http://web.mit.edu/music21/music21j/ext/require/require.js'
        warnBanner='no'></script>

If you are writing on Blogger or another platform, you will need to switch from "Compose" to "HTML" mode to enter this tag and the div tags below below.  I wrote the rest of this post in Compose mode and then added the tags later. If you're an advanced user, you can put the script tag in your Blogger template. It will call the scripts asynchronously, so your page loading will not slow down.

The "data-main" parameter says that music21j is needed, and music21j uses the amazing require.js package, specified in the "src" parameter.  Music21j uses new technologies that have been standard in all web browsers released since March 2011. Unfortunately, 20% of people on the Internet still use older browsers. If musical examples are crucial to your page, remove the warnBanner='no' line and a warning message and opportunity to upgrade the browser will be shown. For most of us, a page without examples is better than no page at all, hence why I suggest putting the warnBanner='no' line.

To put in a musical example, put the notation in the TinyNotation format described at moduleTinyNotation inside a

tag with classes "music21" and "tinyNotation", like so:

<div class="music21 tinyNotation"> 2/4 c2 d e4 f#8. g16 r4 c'4>/div<

The "2/4" is, obviously, the time signature. Notes are given by A-G for bass clef notes, a-g for low treble clef notes, a'-g' for higher treble clef notes, AA-GG for lower bass clef notes. Additional quotes or doubled letters represent even higher or lower notes.  #, b, or n are for sharp, flat, or natural (optional) and follow any quote signs.   "r" stands for a rest.

Durations are specified with 4 = quarter, 2 = half, 1 = whole, 8 = eighth, etc. A dot after the number dots the note.  There aren't ways of doing triplets, etc. currently.  If there is no number then the previous duration still applies.

Here is that example rendered.  Click on it to play it.

2/4 c2 d e4 f#8. g16 r4 c'4

There is no way of specifying the tempo, unfortunately. If you don't like the playback, put "noPlayback" in the class tags.  This example cannot be played.

<div class="music21 tinyNotation noPlayback">3/4 C2 D-4 Dn E- E F2.</div>

3/4 C2 D-4 Dn E- E F2.

I'm working on getting other notation formats, including MusicXML, ABC, MIDI, etc. to work soon; however they will not be converted on the browser, so only TinyNotation will work on a completely off-line application.  This summer will see some amazing new developments in this space.

The rendering is done via VexFlow and the playback is from MIDI.js. Both are amazing projects worthy of supporting. The development of music21j is supported by a Brit D'Arbeloff education grant at MIT.