ADDING INTERACTIVITY TO WEB PAGES FOR MUSIC EDUCATION

Adding Interactivity to Web Pages for Music Education

Steven G. Estrella
Temple University Esther Boyer College of Music

estrella@astro.ocis.temple.edu

The World Wide Web is a rich multimedia environment of great use to music educators and their students. Many web sites present information in the form of text, photographs, graphics (including music notation), digital audio, MIDI data, animations, and digital video. Some music educators have responded to this technology by designing web sites to present topics in music theory and music history as an alternative to more seasoned multimedia technologies like CD-ROM. Multimedia on CD-ROM or disk, however, is also designed for complex interactivity, data processing, and analysis of user responses. Web-based presentations rarely contain such interactivity because HTML was designed as a page-description language not a programming environment. This paper will feature information and techniques for using embedded multimedia resources, forms, frames, CGI programs, and JavaScript to add interactivity to world wide web pages devoted to music education. This paper is an extension of the presentation (Integrating Multimedia into World Wide Web Pages for Music Education÷given at the 1997 TDML and now online at http://stumac39.music.temple.edu/multimedia/outline.html. This presentation will be accessible from the same web address within two weeks of the conclusion of this conference and will include the following topics:

creating web spaces for music improvisation and composition

creating tests and drills for the web using frames, forms, and CGI

Javascript

This demonstration will include a tour of interactive web sites for blues improvisation and interval identification.

A Technique for Creating Music Improvisation Web Pages

This first technique I would like to present is relatively simple to implement and requires no computer programming experience and only a moderate knowledge of HTML. This technique can be described as Multiple Embedded Multimedia Objects (MEMO). The MEMO technique works well with the QuickTime plugin from Apple Computer. The QuickTime plug-in is part of the standard software distributed with Netscape Navigator. Standard MIDI files and digital audio files may be converted to QuickTime movies using the MoviePlayer application which is available for free from Apple Computer. The technique for converting MIDI and digital audio files to QuickTime was explained in last year's presentation and is available at http://stumac39.music.temple.edu/multimedia/outline.html. A web page is then created which embeds the QuickTime movies within the cells of a standard HTML table. One example of this technique is the "Blues Jam" page at:

http://stumac39.music.temple.edu/mmiweb/bluesjam.html

The HTML code seen below creates a page filled with a single QuickTime movie of the blues rhythm section followed by several tables of QuickTime movies of blues licks. The rhythm section movie was created from a standard MIDI file made in MasterTracks Pro on a Power Macintosh. The performer is Temple student Gino Guarnere. The first row of scat licks was created using SoundEdit 16 on a Power Macintosh and sung by me. The remaining rows of licks were excerpted from standard MIDI files created by Temple students Fred Wackenhut, Davis Giersch, and Chuck Gottesman. Any number of movies can be played concurrently up to the voice limit of the user's sound card or MIDI sound module. In the absence of a MIDI device, the QuickTime movies can be played through the internal speaker of the computer using the QuickTime Musical Instruments software synthesizer.

Figure 1 - Excerpt from the HTML Code for the Blues Jam page.

<H1>Blues Jam</H1>

The QuickTime MIDI file of the rhythm section (music by Gino Guarnere) should begin playing after this page loads if your system is properly configured with the <A HREF="http://quicktime.apple.com">QuickTime plugin.</A> Please be patient, the rest of the page may take some time to load. The scat licks are particularly large but they are worth the wait.

<P>

<P>

Click on any of the buttons below to play some cool licks to jam with the blues rifts.

<P>

</TR>

</TR>

</TABLE>

</TR>

<TD ALIGN=CENTER>accordion</TD><TD ALIGN=CENTER>synth</TD>

<TD ALIGN=CENTER>vibes</TD><TD ALIGN=CENTER>whistle</TD>

</TR>

</TABLE>

A Technique for Creating Music Drills and Tests on Web Pages

Frames can be used in HTML to create music drills and tests by loading one frame with the question and a second frame with an answer sheet. The question frame begins with item 1 and includes a link to load each subsequent item. The answersheet frame includes a table of check boxes within a standard HTML form. After the user completes the answer sheet, he/she clicks a submit button which sends the answers back to the web server. When the answers arrive at the server, a CGI program analyzes the responses, writes the responses to a text file on the server, and sends an HTML page back to the user's browser providing customized feedback. If CGI programming of this nature is not available to the teacher, he/she can simply include a "mailto:" link in place of the URL for the CGI program and have the answer sheet sent to his/her email box. The teacher can then grade the test and respond by email. One example of this use of forms, frames, and CGI can be found at http://stumac39.music.temple.edu/etta/ where you may take the Estrella Test of Tonal Ability (ETTA). After the practice question, a frames presentation generates two frames using the code below. Notice the inclusion of the <NO FRAMES> tag for those few web browsers which do not yet support frames.

Figure 2 - HTML Code to generate frames for the ETTA.

<HTML><HEAD><TITLE>Estrella Test of Tonal Ability</TITLE>

</FRAMESET>

</HEAD>

<BODY>

<P>Your browser does not currently support frames.<BR>

Go to <A HREF = "home.netscape.com">Netscape's Home Page</A>

and download the latest version of Netscape Navigator.</P>

<P>The Estrella Test of Tonal Ability is available in a no frames version at <A HREF="etta.html">http://stumac39.music.temple.edu/etta/etta.html</A>. This version, however, takes a long time to load because all the examples must fit on one page for the form cgi to work properly.

</NOFRAMES>

</BODY>

</HTML>

The top frame is filled with a document called "answersheet.html". This document contains a table within a form. The code is below in Figure 3.

Figure 3 - HTML Code for the ETTA frame "answersheet.html".

<HTML><HEAD><TITLE>ETTA Answer Sheet</TITLE></HEAD>

<font size=6>ETTA Answer Sheet</FONT><BR>

</TR>

</TABLE>

<P>

</CENTER>

<P>

Gender

<OPTION> Please select your gender. <OPTION> Female <OPTION> Male

</SELECT>

</FORM>

<CENTER><A HREF="default.html">Click here to review the instructions</A></CENTER>

</BODY>

</HTML>

The bottom frame is filled with a different document for each test question. Each question consists of an example QuickTime file and five possible responses. The user is asked to determine which of the five QuickTime files is most like the example. All the QuickTime files contain MIDI data only. The code for the first item is presented below. Please notice that the code includes a link to load item 2 of the test in the same frame. In this way the user progresses through all 15 items of the test without the bandwidth overhead of having to load all 15 items onto one page.

Figure 4 - HTML Code for the ETTA frame "item1.html".

</TR>

</TABLE><BR>

</CENTER>

</BODY>

</HTML>

Using JavaScript to Add Interactivity to Music Education Web Pages

JavaScript is an easy-to-learn scripting language for the web. JavaScript programs are included as plain text within a standard HTML document. The code is then interpreted by the JavaScript-compatible browser when the page loads. No plug-in software or special configurations of the browser are required. The current version of JavaScript is 1.1 and is supported by the current versions of browsers by Netscape and Microsoft. Although it is not possible to use JavaScript to communicate with the web server, it is very possible to use JavaScript to interact dynamically with the client. JavaScript is often used to create interactive forms where user input is analyzed and responses are posted directly to form elements on the web page. JavaScript is useful for creating self-guided tutorials, music games, and anything else you might imagine. It is a powerful scripting language yet requires only a few days to learn. Those who have experience with other scripting languages, such as HyperTalk, may find the syntax and vocabulary of JavaScript unfamiliar but the concepts and structures are certainly similar.

I will now demonstrate three versions of an interval recognition game I created for this presentation. The first version uses simple JavaScript concepts to create an interactive form with text fields for user input. In this example, users are expected to click on each embedded QuickTime file's play button, listen to the interval, and then type the name of the interval in the appropriate text field. After completing all items, the user clicks the "evaluate" button to receive a score. Analysis and feedback is provided through the script seen below. In this script the name "gamesheet" represents the HTML form and the names "q1" through "q5" represent the text fields for user input. Each field is tested for the presence of the correct interval name and a score variable is incremented when appropriate.

Figure 4 - JavaScript Code for "intervals1.html".

function Validate() {

var score=0;

if (document.gamesheet.q1.value == "maj2") {

score += 1;

}

if (document.gamesheet.q2.value == "maj6") {

score += 1;

}

if (document.gamesheet.q3.value == "min2") {

score += 1;

}

if (document.gamesheet.q4.value == "p4") {

score += 1;

}

if (document.gamesheet.q5.value == "min3") {

score += 1;

}

document.gamesheet.results.value = score;

}

</SCRIPT>

A second version of the game adds more complex feedback and uses radio buttons instead of text fields to gather user input. A third version of the game uses more complex JavaScript to randomize the order of presentation each time the page is loaded. In all three versions, the user's input is not stored on the server nor sent to an email mailbox. Those features, however, can be added through the use of simple CGI programs available on most servers to process and relay standard HTML form input.

With a little creativity and training, dynamic interactivity can be added to web pages for music education without modifying the user's browser configuration and plug-in setup. These web pages can be accessed by students in multiple locations using different computer platforms. Thus the expense and compatibility issues inherent in producing and distributing CD-ROM or disk-based multimedia presentations are eliminated in favor of a universal, multi-platform multimedia development environment.