A WEB TOOLKIT FOR MUSIC EDUCATORS

A Web Toolkit for Music Educators

Steven G. Estrella
Temple University

Attempts to add complex interactivity, data processing, and analysis of user responses to web pages for music education have been somewhat frustrated by the lack of available development tools appropriate for music educators. Music educators who attempt to create computer-assisted instruction on the web often must create large numbers of audio files and music notation graphic files before even basic exercises can be created. Substantial skills in MIDI applications, computer programming, graphic design, audio engineering, and cross-platform web design are all needed to create the resources needed to create music instruction for web delivery. What is needed is a toolkit for those music educators who wish to create tests, drills, and creative activities for delivery on the web but have neither the time nor prerequisite skills to create their own source materials. This presentation describes the creation of such a tool kit consisting of a downloadable set of files and an instructional web presentation. The toolkit contains:

Syllabi for two courses in Interactive Web Programming

Web pages on HTML 3.2 and HTML 4.0 authoring

Web pages on the basics of digital media

Web pages on the use of QuickTime content

Web pages on JavaScript programming

Web pages demonstrating JavaScript interactivity

A library of notation and other graphics

Templates for delivering music drills and tests

Sample web presentations created with Dynamic HTML, JavaScript, and the Beatnik player

A web site located at http://stumac39.music.temple.edu/IWP

In the Spring of 1999 the Technology Institute for Music Educators (TI:ME) asked me to create a level 2 certification course in interactive web programming. The course was to be designed for music educators who already possessed TI:ME level 1 certification. These educators would begin the course already possessing basic skills in music notation software, music sequencing, manipulation of digital media, and HTML authoring. The level 2 course would add skills in computer programming using a template/model approach. Students would learn to create interactive applications for music instruction on the web. The course content would be delivered in an Adobe Acrobat PDF file with supporting materials available on a publicly-available web site.

Those who visit the web site and lack the prerequisite skills are directed to web presentations for Interactive Multimedia I at Temple University and other TI:ME Level 1A courses. The course is delivered in workshop format with presentations alternating with hands-on exercises.

By the end of the course, students should be able to:

Create a web page containing text, graphics, animations, sound, and video.

Create a web page containing a "mailto:" form.

Create a web page demonstrating form validation.

Create a web page that demonstrates image swapping (i.e. rollovers).

Create a web page that makes creative use of multiple QuickTime files.

Create a web page that grades a test and transmits results to the author via email.

Create a simple animated GIF.

Convert MIDI files to QuickTime movies.

Create a scripted slide show.

Create a web page to illustrate sequencing, looping, and conditional branching.

Each student creates a final project consisting of a web site designed to drill aural/theoretical skills, demonstrate musical concepts, and/or provide an interactive musical workspace.

A prerequisite to web programming is a solid understanding of HTML and the basics of digital media. The course begins with the following review topics:

Sample Home Page Presentation

HTML Review

Exercise: Correct the Code

Multimedia Basics: Text

Multimedia Basics: Still Images

Drawing and Painting: Basic Exercises

Basic Animation

Image Map and Sidebar Sample - Pennsylvania

Multimedia Basics: Sound

Sound Editing with SNDSampler

Multimedia Basics: Moving Images

Tips for Using Video in Web Pages

Cascading Style Sheets: DOs and DON'Ts

The course then introduces Apple Computer’s QuickTime software which allows web programmers to embed a wide variety of digital media directly into web pages. Multiple QuickTime movies can be embedded on a single page to allow for substantial interactivity with nothing more than common HTML and EMBED tags. The unit on QuickTime consists of the following topics.

QuickTime Plugin Syntax

Multiple QuickTime Movies: Lullabye

Multiple QuickTime Movies: BluesJam

The next topic to be introduced is web programming with JavaScript. JavaScript is the most popular scripting language used on the web and is fully supported in

Netscape Browsers version 3.0 and above. Microsoft browsers support Microsoft's JScript language which is mostly compatible with JavaScript. The document object models of the two browsers are very different, however, and students are taught the different ways to reference objects in the two browser models. The students first learn the basic concepts of JavaScript and the Document Object Model. They then complete exercises to learn the programming basics of sequence, looping, and conditional branching. The supporting web site contains model pages to illustrate basic techniques in interactive web programming. Students complete at least one page to demonstrate their understanding of each of the following concepts.

Rollovers

Looping

Prompting

Forms and Form Validation

Time and Date

Testing with and without Cookies

Detecting Plugins

Time to Distance Calculator - manipulation of form content

Randomization of web page content

Client-side Image Mapping

Buttons and Functions

Automatic Field Formatting

Creating a JavaScript slide show.

Animation of Text

Navigation Popup Menu

Choose GIF Popup Menu

Keyboard Image Map

A recent and exciting addition to Interactive Web Programming is a collection of downloadable templates and files using Dynamic HTML (DHTML), JavaScript, and the Beatnik Player web plugin available at http://www.beatnik.com. The Beatnik player is a free plugin for Macintosh and Windows that creates a completely programmable General MIDI synthesizer in software. The Beatnik player supports Netscape Navigator 3.0 and above on Power Macintosh and Windows and Internet Explorer on Windows.

The sample projects below use external JavaScript files and media objects available as a binhexed, compressed archive 'webtoolkit.sit.hqx' downloadable at http://stumac39.music.temple.edu/IWP/toolkit/webtoolkit.sit.hqx (see Figure 1). The external JavaScript files include "toolkitapi.js" containing utility scripts for manipulation of on-screen graphics and the Beatnik player. I developed these routines with assistance from Dynamic HTML: The Definitive Reference by Danny Goodman and published by O'Reilly. Anyone serious about cross-browser DHTML authoring should definitely obtain this text. The other external JavaScript files include files from Beatnik like "music-object.js" that support common functions of the Beatnik player and files I created like "keyboardandstaff.js" that support specific projects. Together these files comprise an application programming interface (API) for future projects to exploit.

Figure 1. Directory listing for the webtoolkit downloadable file.

The sample projects in the downloadable file are organized in separate folders. The viewable source code is heavily commented to assist users in creating customized exercises. All file references are relative to allow the web toolkit folder to be placed on any server with no need for code alterations. To use these files effectively, users should have a background in HTML and a good eye for detail. Like any programming language, JavaScript requires precision. A misplaced capital letter, quote, comma, or parenthesis can cause errors.

The "Play a Melody" project is a simple page to demonstrate how the toolkit can be used. Users may open the original HTML file in a text editor like BBEdit or Notepad. The comments guide the user in entering melody notes, melody durations, and a tempo. The user then saves the file, reloads the page in the web browser, and plays the new melody.

Example 1 - JavaScript code from the "Play a Melody" project.

/* Fill this array with simple note names for your melody in the form 'c4','d4','e4','f4','g4' etc...*/

var myMelodyNotes = new Array('c4','d4','eb4','f4','g4','a4','bb4','c5','g4','c4');

/* Fill this array with duration names for your melody in the form 'h','qdot','e','e','hdot' etc...

s is for sixteenth note, e is for eighth note, q is for quarter note, h is for half note

w is for whole note, ww is for double whole note.

Add 'dot' to any duration name to get the dotted version.

var myMelodyDurations = new Array('h','q','e','e','h','edot','s','q','q','ww');

// Just put a tempo here in beats per minute.

var myTempo = "160";

Figure 2 - Screen Shot from "Play a Melody"

The "Interval Recognition Training" sample project requires no changes to the code. Instead, users can configure this application while it is running. The drill provides immediate feedback, cumulative score calculation, and allows the user to compare incorrect with correct answers. Users can select which intervals they wish to drill and set the following playback option:

melodic or harmonic presentation

fixed or randomly varied first pitch

direction - ascending, descending, or mixed

pitch duration in milliseconds

number of allowable repetitions

General MIDI playback timbre

The "Pitch Dictation Exercise" sample project allows for extensive customization to the code. Teachers can make multiple copies of the template and add simple links to create a series of pitch dictation exercises for student practice. The exercise provides immediate feedback and allows the user to compare incorrect with correct answers. Teachers can customize the code in the following ways:

Enter pitch notes directly into the myMelodyNotes array

Enter pitch durations directly into the myMelodyDurations array

Choose a fixed duration for pitch only exercises.

Enter a playback tempo

Enter the number of allowable repetitions

Enter the clef and key signature

Allow enharmonics to be evaluated as correct or not

Allow student users to hear or not hear pitches as they click the on-screen keyboard.

Figure 3 - Screen Shot from "Interval Recognition Training"

Once these options are set, the page is saved and reloaded in the browser. An appropriate number of measures is automatically generated on-screen by the DHTML code. An external CSS-P style sheet is used to allow for precise positioning of noteheads on the staff. Students may choose any General MIDI playback timbre to listen to the exercise. Students enter their answers by clicking an on-screen enharmonic keyboard that is coded as an image map. The JavaScript routines automatically advance to the next note once a pitch has been entered. The student receives immediate feedback and can compare his/her answer to the correct answer.

Example 3 - JavaScript code from the "Pitch Dictation Exercise" project.

// Fill this array with simple note names for your melody in the form 'c4','d4','e4','f4','g4' etc...

/*ENTER PITCH NAMES HERE IN THE myMelodyNotes ARRAY (be sure to use quotes)

FOR BASS CLEF THE USABLE RANGE IS Bb2 to F4

FOR TREBLE CLEF THE USABLE RANGE IS G3 to D6

var myMelodyNotes = new Array('c4','d4','eb4','f4','g4','a4','bb4','c5','g4','c4');

/* Fill this array with duration names for your melody in the form

'h','qdot','e','e','hdot' etc...

s is for sixteenth note, e is for eighth note, q is for quarter note, h is

for half note

w is for whole note, ww is for double whole note.

Add 'dot' to any duration name to get the dotted version.

For simple pitch dictation you may wish to set all durations to q.

To set all durations to q, set the fixedduration variable to "true"

Otherwise, set fixedduration variable to "false" and enter durations in

myMelodyDurations array.

var fixedduration = "true";

var myMelodyDurations = new Array('h','q','e','e','h','edot','s','q','q','ww');

if (fixedduration == "true"){

endfdloop = myMelodyNotes.length;

for (i=0;i<=endfdloop; i++){

myMelodyDurations[i]="q";

}

//ENTER A DEFAULT PLAYBACK TEMPO IN NOTES PER MINUTE.

var myTempo = "200";

//ENTER A CLEF NAME (bass or treble only).

var theClef = "treble";

theClef += "staff";

/*ENTER THE MAXIMUM NUMBER OF TIMES THE STUDENT GETS TO HEAR THE DICTATION

EXERCISE

var maxdictation = 4;

/*ENTER A KEY SIGNATURE NAME (0s through 6s for sharps,

0f through 6f for flats).

var keysig = "0s";

/*BY DEFAULT, ENHARMONIC NOTES ARE EVALUATED AS CORRECT.

CHANGE BELOW IF DESIRED.

var enharmonicsOK = "true";

/*BY DEFAULT THE KEYBOARD WILL NOT PRODUCE SOUNDS FOR DICTATION EXERCISES.

CHANGE IF DESIRED.

var keyboardsounds = "false";

Conclusion

The web toolkit for music educators will continue to evolve and improve. New sample projects will be added and any feedback received from visitors will be incorporated. I would like to see educators take advantage of the resources I have provided and inform me about any projects created with the toolkit. Before learning Dynamic HTML and absorbing the details of the two browser’s document object models, I was limited to using tedious image swapping techniques to achieve interactivity. Creating interactive exercises using these techniques was an heroic effort. With DHTML and an evolving cross-browser application programming interface (API) it is now possible to envision complete web-based curricula for music learning.

Figure 4 - Screen Shot from "Pitch Dictation Exercise"