WEBET: AN INTERACTIVE WEB-BASED LEARNING ENVIRONMENT

WebET: An Interactive Web-based Learning Environment

Michael F. Murray
Department of Music, Southwest Missouri State University

MikeMurray@mail.smsu.edu

WebET is an interactive World Wide Web-based learning environment designed to help the student develop aural skills in conjunction with a four-semester undergraduate ear training course at the college level. Each semester-long course has its own series of lessons containing exercises designed to reinforce concepts and skills presented in the classroom.

There are currently four types of ear training exercises included in WebET. These include melody dictation, rhythm dictation, four-part harmony dictation, and error detection. Many other types of exercises and skill development could be included by a creative instructor, because the program was designed to allow teachers to develop their own exercises.

WebET offers several distinct advantages over other types of computer-assisted ear training courses. Because it was developed for use over the World Wide Web, it is by definition cross-platform. Any user with a relatively recent personal computer (either Macintosh or Wintel) and with access to the Internet can use the exercises. For those students who do not have the necessary equipment to use WebET from their own dorm room or home, the exercises are accessible from a student computer lab on campus. It is also possible to deliver the exercises over a local network if no Internet access is available.

One of the motivations for the development of this program was the idea that students would not need to come to the music building to practice their ear training skills. Students can have access to these exercises at all times, and can therefore practice according to their own schedule. This also frees up lab space for students wishing to use the computer lab for other purposes.

The development of musicianship skills moves at a different pace for each individual student. This can be said about other skills as well, but it is particularly true for the acquisition of ear training and sight singing skills. WebET allows students to work at their own pace within a structure provided by the course and instructor. Because they are truly interactive, the exercises can be attempted in different ways according to the wishes of the student. A student can choose to practice only certain types of exercises, or to go back and work on a previous lesson, or to jump ahead and attempt more difficult exercises if s/he feels capable.

The layout of each exercise page consists of a playback console, a partially notated exercise containing certain starting information (i.e. clef, key signature, meter signature, number of bars), some written instructions, and various navigation buttons and links. The "bare-bones" version of an exercise allows the user to stop, play, and pause the sound file, as well as call up the "answer window" when s/he wishes to evaluate the attempt. An exercise can be played as many times as is wished, and it can be stopped or paused in the middle.

Another major advantage of WebET is its flexibility. After the first web pages were designed, they were used as templates for instructors to design their own exercises. One of the great limitations and frustrations of much currently available software for music learning is that the author/developer decides what materials will be included. With WebET, instructors have the opportunity, with a minimal amount of training, to develop their own curricula and create WebET exercises which directly parallel their particular syllabi.

WebET has been in use in a university theory program for two semesters. Each of the courses in a four-semester sequence has its own set of lessons and exercises. The student response has been very good, and several instructors have tried their hand at designing their own exercises. Because of its flexibility, WebET has also been used in a music fundamentals course for Music Theater majors, and it could be easily adapted to any level of instruction.

Future developments in WebET will include drill pages for intervals and chord qualities, and a system to allow online testing and monitoring of student activity. Currently under development are improvements to the interactivity of the exercise pages. Students will soon be able to choose different timbres (patches) for the exercise playback, and will also have real-time control of tempo. These developments are implemented through the use of buttons on the page that can control these elements.

WebET makes use of the multimedia plug-in Beatnik for its playback of sound files. The Beatnik Player is available at no cost from Headspace, the company that developed it, and it is also being distributed with Netscape Navigator v. 4.5. Because Beatnik is currently compatible only with the Netscape browser, Netscape must be used to properly hear the exercises. Beatnik was chosen due to its excellent sound quality and its flexibility to allow for future developments in WebET. Because the sound files associated with each exercise are in the MIDI file format, other plug-ins can be used to play the exercises. However, in order to take full advantage of the interactive elements, Beatnik must be used. Users do not need to have access to external sound modules. A sound card and speakers installed in the computer are enough to take full advantage of WebET.

Each exercise has five files associated with it. These include two HTML text files, two graphics files, and a MIDI file. The main text file contains the HTML code that allows the page to be viewed by any HTML browser. The other text file displays the answer to the exercise when it is called up by the user. One of the graphics files contains the starting information for the exercise, and is inserted directly into the main exercise page. The other graphics file contains the answer, and is loaded into the answer window at the appropriate time. The MIDI file produces the sound to be played, and is embedded in the main exercise page that causes the Beatnik (or other plug-in) playback console to appear in the upper left corner of the page. A simple JavaScript is included that calls up the answer window when the user clicks on the "SHOW ANSWER" button.

We will now examine the HTML code that produces an exercise page. The first five lines provide standard information to the browser, including the title of the page itself. The <BODY> tag begins the real substance of the page. We will return to the <SCRIPT> tag and the function definition later.

<HTML>

<HEAD>

</HEAD>

<!--function AnswerWindow() {window2=open("md11242.html",

"Answer","toolbar=no,directories=no,menubar=no,width=650,height=200");}//-->

</SCRIPT>

The <EMBED> tag locates the MIDI file associated with this exercise and loads it into the page. When this happens, the browser will also load whichever plug-in is designated to handle MIDI files. The series of parameters within the <EMBED> tag defines the appearance of the playback console.

<EMBED SRC="md11242.mid" TYPE="audio/MIDI"

PLUGINSPAGE="http://www.headspace.com/beatnik/?plug-in/?index-body.html"

WIDTH=144 HEIGHT=15 DISPLAY="SONG" AUTOSTART=FALSE NAME="melody1Plugin">

The next lines specify the layout of the page and give some written information about the exercise. The <IMG> tag inserts the graphic with the starting information into the page.

TDML

</H1>

Melody Dictation #1

</H2>

You will hear one measure of beats on the tonic.

The <FORM> tag provides the "SHOW ANSWER" button and calls the AnswerWindow function when the button is clicked. The AnswerWindow function was defined near the top of the HTML file. This function causes a separate window to open, containing the HTML file with the answer to the exercise inserted into it. The type and appearance of this window are defined in the parameter list enclosed within the parentheses.

<FORM>

</FORM>

</BODY>

</HTML>

The various files for the exercises are developed using an HTML editor, music notation software, and MIDI sequencing software. AOLPress was the HTML editor used to develop these exercises, due to its availability and ease of use. There are many HTML editors available for both platforms, and any of these will work. AOLPress employs a WYSIWYG development environment, with the option of working directly in HTML available as well. This allows the developer to place elements on the page in any arrangement, and the HTML code necessary to accomplish this will be automatically generated by the program. However, including JavaScript interactivity in the pages requires some familiarity with HTML and JavaScript..

The music notation package Finale was chosen for the creation of the musical graphics, but any software capable of generating music notation and the ability to export this notation as a graphics file will work. The conversion of the file to the GIF format is recommended to ensure maximum compatibility on the web. At present, Finale will not generate a GIF file directly, so a utility program was used to convert the graphics files.

Finale was also chosen because of its ability to generate MIDI files from the source file. It would also be possible to generate the MIDI file associated with each exercise from a separate sequencing program. The MIDI file contains the pitch and timing information in an extremely compact form. No sound is actually recorded in a MIDI file. This makes the download time for the exercise pages very short, and it also allows for manipulation of the sound file.

When the MIDI file is created in Finale, tempo and timbre information is created as part of the file. However, these elements can be changed by the user, because Headspace has developed a JavaScript function library that can be used to add interactivity to any web page employing the Beatnik plug-in for playback of various types of sound files. The "music-object.js" library is available from the Beatnik site, and includes MIDI manipulation functions such as patch change messages and tempo change messages. This allows for realtime control of the MIDI file playback.

By adding a few lines of code to the original HTML exercise page, user interactivity is increased. Buttons giving the user a choice of timbres are generated by the following lines:

<FORM>

</FORM>

For these buttons to function, the music-object.js library must be present at the website, and must also be referred to in the page. A "musicObject" must be created and named as well. This is accomplished by including the following lines near the top of the HTML page:

melody1=new musicObject("melody1");

The newly created musicObject must then be set to respond to function calls by adding the following line to the <EMBED> tag where the MIDI file was referenced:

ONREADY="melody1.setReady()"

The tempo of the playback file can be controlled through the following calls to the music-object.js library:

<FORM>

</FORM>

These enhancements are just a beginning, and a creative developer could devise many more ways to make the exercises more useful and fun to use. The music-object.js library contains many functions not discussed here that can be used to enhance the interactivity and functionality of the WebET exercises. WebET provides a set of exercises for students to use as they and their instructor see fit. By allowing some degree of control to the user and to the instructor, the usefulness of the program is increased greatly.