Click here to view the HTML source of this page!

How to use JAVAScript to embed Music Notation in WEB pages

Introduction

Including the GUIDO source in the HTML document

Defining variables for repeated reference

Including a GUIDO URL in the HTML document

Download JAVAScript source that was used for this page

Go to the overview (How to embed Score in WEB pages)

Introduction

Embedding Conventional Music Notation (cmn) in WEB pages can be realised through lots of different techniques. Here, it is shown, how GUIDO Music Notation can be used in conjunction with JAVAScript and the GUIDO NoteServer to create Conventional Music Notation in WEB pages.

Using this method, it is possible to easily change the score by just changing the GUIDO description, which is included in the HTML-code. Using JAVAScript in conjunction with GUIDO descriptions has one disadvantage: The usage of "\" inside JAVAscript strings must be coded as "\\". Therefore, the GUIDO description

[ \clef<"bass"> c]
must be coded as
' [ \\clef<"bass"> c ] '
Also, the usage of double-quotes (") inside a JAVAscript string requires the usage of single quotes (') to enclose the string.

When the score that needs to be displayed is bigger, using a JAVA-Applet with scroll-bars can be useful. Please look here for a demonstration.

Including the GUIDO source in the HTML document

The following score was included by putting the GUIDO description directly inside the html document:

The following code was used to create this score:

<script>IncludeGuidoStringAsPict('[ \\clef<"treble"> _/8 g g g \\bar e&/2 ]');</script>

If you want to to the score just click

The MIDI-link was created using this html-code:

<script>IncludeGuidoStringAsMIDI('[ \\clef<"treble"> _/8 g g g \\bar e&/2 ]',
'listen');</script>

Defining variables for repeated reference

You can also define a JAVAScript variable if you want to reference a piece repeately on the page:

The following HTML-code was used to create the above score:

<script>var mypiece = '[ \\clef<"treble"> g/4 e e/2 \\bar f/4 d d/2  ]';</script>
<script>IncludeGuidoStringAsPict(mypiece,'0.6');</script><p>
<script>IncludeGuidoStringAsMIDI(mypiece,'Listen to the score');</script>

Including a GUIDO URL in the HTML document

It is also possible to include a URL to a GUIDO file using JAVAScript functions.

The following html-code was used to get the above picture:

<script>IncludeGuidoURLAsPict("http://clef.cs.ubc.ca/salieri/nview/javascript/choral.gmn","0.4");</script>
Note that you can specify any valid URL that points to a GUIDO Music Notation file.

Go to the overview (How to embed Score in WEB pages)