The World Wide Web is rapidly becoming a rich multimedia environment that can be of great use to music educators and their students. Contemporary web sites can include text, photographs, graphics (including music notation), digital audio, MIDI data, animations, and digital video. Music educators, therefore, can now design web sites to teach a variety of topics in music theory and music history, and even demonstrate techniques on a given instrument. Such web sites 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, multiplatform multimedia development environment.
    In the next 30 minutes I will demonstrate techniques for integrating digital audio, MIDI data, notation graphics, music-related animations, and digital video into world wide web pages devoted to music education. The presentation will be cover audio, still images, and moving images.

Audio
    When sound is digitally recorded to a hard disk, a file format is assigned by the recording software. AIFF (Audio Interchange File Format), developed by Apple Computer in 1988, is one of the most commonly used audio file formats on Macintosh, Windows, and even Unix computers. If you use the Internet frequently you have probably also encountered sound files in WAV and AU formats. The WAY format is used by Microsoft Windows and the AU file format is used by computers running the UNIX operating system. Shareware and commercial sound editing programs can create and convert among these and many other file formats.
    The quality of a digital audio file is indicated by its sampling rate and sampling resolution. An analogy to film is useful here. Sampling rate is analogous to frame rate in a movie. Videos display films at 30 frames per second. At less than 15 frames per second the motion looks choppy and unnatural. Similarly the more times per second a sound is measured by an analog to-digital converter chip, the more accurate the reproduction. Sound sampled at forty-four thousand times per second (44 kilohertz or 44 kHz) is much more accurate than sound sampled at 22 or I I kHz. Sampling resolution is analogous to the visual quality of each individual frame of a movie. Color film captures more information per frame than does black and white film. Similarly, 16-bit sampling captures more information per sample than 8-bit sampling.
    The higher the quality of sound, the more space it takes to store the sound. A compact disc can store about 74 minutes of stereo sound recorded at a sampling rate of 44 kHz and a sampling resolution of 16-bits. If you reduce the quality to 22 kHz, 8-bit stereo sound, however, you can store approximately 300 minutes of audio on the same disc. In other words, one minute of stereo sound takes 10 megabytes of storage at 44 kHz, 16-bit quality, and only 2.5 megabytes of storage at 22 kHz, 8-bit quality. When producing sound for use on the Internet, therefore, one must be considerate of the user's needs and limitations. Unless you have a compelling reason to use 44 kHz, 16-bit samples, you should consider using lower quality sound samples to avoid subjecting your users to long download times.
Transcript of Demonstration I
    I have prepared two AIFF files of an excerpt from "Doodlin" by Horace Silver and John Hendricks. The AIFF file recorded at 44 kHz, 16-bit quality is approximately four times as large as the same file recorded at 22 kHz, 8-bit quality. The difference in sound quality, however, is less dramatic (demonstration). The sound quality of the 22 kHz, 8-bit file is adequate for many educational uses. AIFF sound files can be converted into QuickTime movies using MoviePlayer 2.5 and loaded onto any web server. They can then be included in web pages by using the appropriate code found in the "HTML Coding" section of the handout. (End of demonstration)
MIDI
    Sound file formats like AIFF use a lot of disk space because all the information needed to create the sound has to be stored in the file. The Musical Instrument Digital Interface (MIDI) file format, however, stores only a description of a performance. MIDI is a hardware and software standard that, among other things, allows users to record a complete description of a lengthy musical performance using only a small amount of disk space. The information needed to produce different timbres to create the actual sound is stored in a synthesizer attached to the user's computer. Using MIDI, Beethoven's Fifth Symphony uses about 1.3 megabytes of storage and can fit on one floppy disk. Using ~ digital audio file format like AIFF, the same symphony uses more than 300 megabytes of hard disk storage. One problem with MIDI is that the quality of the actual sound will vary depending on the quality of the computer's sound hardware. For educational applications, however, MIDI-generated sound can be used to demonstrate musical ideas quite effectively. Another problem with MIDI in the past was the lack of a standard sound set. A MIDI file designed to be played with piano and flute sounds might be realized with organ and clarinet on another person's computer. This problem was partially solved by the advent of the General NMI standard which created a standard set of 128 sounds. Virtually all MIDI files today are distributed in General MIDI format. Still it was left to the owner of each computer to be sure their sound hardware could play the General MIDI sounds. Apple Computer solved the problem with the latest version of its QuickTime software. Apple Computer's QuickTime Software
    QuickTime began as a set of system extensions to Macintosh System 7 to allow users to play digitized video in a small window on the screen. Today QuickTime is a comprehensive multimedia standard for storing video, animations, and sound in a variety of formats. It is also a cross-platform standard, meaning that QuickTime movies can be viewed and heard using computers running Mac OS, Windows, or even UNIX.
    The latest version of QuickTime, available for free from Apple's web site at www.apple.com, comes with MoviePlayer 2.5. MoviePlayer can convert standard MIDI files into QuickTime movies that can be played back by any Macintosh II or later computer or any PC with a sound card and Windows 3.1 or later. QuickTime MIDI movies use just a little more disk storage space than the MIDI files on which they are based. The actual sound is produced by a software synthesizer that QuickTime installs on the computer's hard disk.
    MoviePlayer can be used to convert audio from compact discs into QuickTime movies that can be used in multimedia presentations. MoviePlayer can be used to add sound and text tracks to digital video. Descriptive voice narrative can be added to a QuickTime MIDI movie containing a full performance of a complex work. For more detailed and advanced editing of video and audio, of course, you might purchase professional software like Adobe Premiere and MacroMedia SoundEdit 16. Using MoviePlayer 2.5 and other free and shareware software, however, you can create many multimedia materials for use on the Internet.
Transcript of Demonstration 2
    I have prepared a standard MIDI file of Bach's Invention No. 4 in d minor. After launching MoviePlayer 2.5, 1 converted the Invention into a QuickTime movie by choosing "open" from the "File" menu. I then located the MIDI file and clicked the "convert" button. In the resulting "Save As" dialog box, I clicked the "Options" button to make the movie compatible with QuickTime 2.0 and add a little silence at the beginning and end of the movie. I have found that adding a little silence makes the beginning and ending of playback a bit smoother. I then saved the movie to disk using any name that came to mind. Once the movie was saved I selected timbres to be used in the performance by choosing "Get Info" from the "Movie" menu and altering the instruments in the music track. I then chose "Save As" to rename the movie, make it self-contained, and make it playable on non-Apple computers. Since this is the actual file that will be uploaded to my web server, I had to take care to name it properly. All web servers use the file name extension ".mov" to designate QuickTime movies so it is important to save movies with this extension. It is also important to avoid spaces in the file name and limit it to 8 characters before the extension if the file is to be loaded onto a Windows-based web server. Macintosh and UNIX web servers, of course, can recognize much longer file names. The resulting file is quite small, approximately 33k in size, and can be easily downloaded by anyone using the web, even with a slow modem. Conversely, even a low-quality AIFF file of the same piece would be well over a megabyte in size and impractical for modem users to download. QuickTime movie files can be loaded onto any web server and included in web pages by using the appropriate code found in the "HTML Coding" section of the handout. (End of demonstration)

Still Images
    The number of graphic file formats used on various computer platforms far exceeds the number of sound file formats. Fortunately, a standard graphic file format was agreed upon very early in the development of the world wide web. The Graphic Interchange Format (GIF) is the most commonly used format on the web. GIF files are compact in size and offer good image quality. JPEG graphics, however, are used frequently for photographs or high-quality artwork. JPEG files are generally smaller than GIF files of similar quality. GIF files, however, can be prepared in an interlaced file format so that the browser displays the graphic gradually instead of waiting for the entire file to load. GIF files can also contain multiple images which can be displayed in sequence to produce animations. For music notation graphics, small animations, and images other than photographs, choosy webmasters choose GIF.
Demonstration 3
    I will now demonstrate one method of converting music notation graphics into the GIF format used on the web.
    I created a Finale music notation file of a four-measure excerpt of Bach's Invention No. 4. The excerpt was then converted to an encapsulated postscript (EPS) graphic using the "compile postscript" menu command available within Finale. The EPS file was then edited using SuperPaint and saved as a PICT file. Finally the PICT file was converted to GIF format using Graphic Converter, a shareware graphic conversion program. This method requires a graphics program like SuperPaint or the graphics module of ClarisWorks to convert the EPS files into a PICT file, and a GIF conversion program to convert the PICT file to a GIF file.
    If your music notation program does not allow you to export the notation to an EPS or PICT file, you can use the standard Macintosh screen dump command (Command-Shift-3) to export the entire screen to a PICT file. The PICT file can then be opened, cropped, and converted to GIF format using Graphic Converter. GIF files can be loaded onto any web server and included in web pages by using the appropriate code found in the "HTML Coding" section of the handout. (End of demonstration)

Moving Images (animations and digital video)
    Scrolling notation is one popular technique for enhancing music reading within multimedia presentations. Many music notation programs, like Finale, allow users to watch their notation scroll by on the screen as the music plays in synchronization. By using a screen capture utility, like CameraMan, the scrolling notation can be saved as a QuickTime movie file. MoviePlayer 2.5 can then be used to add a MIDI file, vocal commentary, and text titles to the scrolling notation can be final product can be published on a web site as a QuickTime movie.
Demonstration 4
    To create a scrolling notation movie of Bach's Invention #4, 1 began with a music notation file in Finale. Within Finale, I chose the Playback window and set the playback tempo. I then resized the window so that the notation would scroll in the upper left comer of the screen. Next, I switched to the CameraMan screen-capture software and set the screen capture area to encompass only the notation portion of the screen. I also set the software to NOT record sound because I intended to add MIDI data to the scrolling notation movie. Next, I returned to Finale, tapped a keyboard sequence to begin capturing the screen, and clicked the play button in the playback window. When the piece was finished, I tapped another keyboard sequence to end screen capture and saved the captured movie as "Bach Movie".
    I then switch to MoviePlayer 2.5, opened both "Bach Movie" and "BachInv4.mov" which contains the MIDI file I converted in demonstration 2. The MIDI file used in the creation of that movie, of course, was recorded at the same tempo as that of the scrolling notation in "Bach Movie". I then chose "Select All" from the "Edit" menu and then "Copy" from the "Edit" menu. I then clicked at the beginning of "Bach Movie", held down the "option" key on the keyboard, and selected "Add" from the "Edit" menu. By using the "option" key, I was able to overlay the MIDI data on top of the notation movie. Without the "option" key, the MIDI data would have been inserted before the notation movie. I then saved the file with the name "BachScrolling.mov".
    'Me "Modes" web site, shown here, combines many of the techniques demonstrated above. Notice how Netscape Navigator embeds appropriate controls into the web page in response to the "embed" tag used in the HTML code. The "BachScrolling.mov" file is used to illustrate the minor mode. (End of demonstration)
Using Video to Teach Instrumental Technique and Maintenance
    Music teachers sometimes use video to demonstrate instrumental techniques. Using a computer with video input, video demonstrations can be digitized and made available on a web site. For nonmusical demonstrations, such as instrument maintenance, QuickTime movies can be converted to animated GIF's to save disk space and download time. Any necessary vocal commentary can then be replaced by written text.
Demonstration 5
    Observe a QuickTime movie demonstrating recorder technique. This movie requires synchronized audio and narrative in order for it to achieve its musical purpose. A non-musical demonstration such as instrument maintenance, however, could be achieved through use of a silent animation which loads much more quickly. Using GIFBuilder, an animated GIF file showing the cleaning of a recorder, was created from a series of still pictures. A text block explaining the maintenance was substituted for the voice narrative of the original movie. Animated GIFs are adequate for explaining non-musical processes but QuickTime movies are needed for actually demonstrating musical techniques on an instrument. Although the movies are embedded in this demonstration web page, you should probably avoid embedding large movies because of the prohibitive download times they pose for modem users. Instead, export the first frame of the movie to a PICT file, convert that file to GIF format, and load it on the page with a link to the complete movie.
    Animated GIF files can also be used to simply enhance the appearance of any web page. This page displays an animated GIF of a recorder being swabbed. GIFBuilder software can be used to create animations that loop one or more times or loop continuously. (End of demonstration)

Adding Complex Interactivity
    For more complex interactivity, such as administering and grading tests on-line, it may be necessary to use a traditional multimedia development environment like HyperCard, SuperCard, or Director. Using web browser plugin software, projects created with these development environments can be used by a wide audience on both Macintosh and Windows platforms.
Demonstration 6
    On this web page, I have a demonstration version of a music test I am currently developing. It will be published on the web using the Roadster Plugin for SuperCard by Allegiant Technologies. The test plays back music samples and asks the student to determine if they are the same or different. Students receive their test scores immediately and their responses are sent to me via e-mail for statistical analysis. Creating content that requires the use of plugins limits your audience because not everyone will have the time or skill needed to download and correctly install the plugin software. The alternative to plugins is to learn the complexities of Java programming. Using Java, however, also limits your audience because not all browsers fully support Java applications. For now, the plugin solution seems to be the easiest way to add complex interactivity to web sites. Given the pace of web development, however, it is likely that this situation will change within a year or two. (End of demonstration)

HTML Coding for Multimedia
    The latest versions of Netscape Navigator and Microsoft Internet Explorer both allow content creators the option of referencing (i.e. linking) or embedding multimedia objects. Referencing a multimedia object is similar to referencing a related web site. HTML code similar to the following will display a link to allow visitors to a page to download and experience a sound, movie, or graphic stored in the "multimedia" directory of a server called "www.myserver.edu".

    To reference a sound file:
        <A HREF="http://www.myserver.edu/multimedia/mysound.aiff'>Click here to hear the sound.</A>

    To reference a movie file:
        <A HREF="http://www.myserver.edu/multimedia/mymovie.mov">Click here to see the movie.</A>

    To reference a graphic file:
        <A HREF="http://www.myserver.edu/multimedia/mygraphic.gif">Click here to see the picture.</A>

    Embedding a multimedia object is a bit different in that the movie file is loaded as part of the web page. With QuickTime movies, the embed tag calls the QuickTime Plugin (version 1. 1 is the latest). When the plugin is present, recent versions of Netscape Navigator and Microsoft Internet Explorer respond to the embed tag by displaying appropriate controls for the user to play the QuickTime movie file. HTML code similar to the following will automatically load a movie file stored in the "multimedia" directory of a server called "www.myserver.edu".

    To embed a movie file:
        <EMBED SRC="http://www.myserver.edu/multimedia/mymovie.mov" WIDTH=160 HEIGHT=144>

    In addition to WIDTH and HEIGHT, there are a number of other parameters you can specify in the EMBED tag to control how your movie is presented. These are explained in the QuickTime Webmasters page at http://quicktime.apple.com. One popular option is the AUTOPLAY parameter which can be used to begin playing the movie file as soon as it is loaded.
    Embedding a graphic is fairly straightforward and familiar to even novice webmasters. The width and height tags are optional but recommended. When they are absent, many browsers respond by delaying the display of any text that comes after the graphic. When they are present, all text loads first, followed by the graphics. It is kind to your users to give them something to read while they wait for the graphics to load. Also, use the ALT tag to assist those who browse the web with text-only browsers like lynx.

    To embed a graphic file:
        <IMG SRC="http://www.myserver.edu/multimedia/mygraphic.gif' width=100 height=160 border--O ALT="A picture of my dog.'5

    Some multimedia development environments, like SuperCard by Allegiant Technologies, publish web browser plugins to allow webmasters to include fully interactive applications in their web sites. The basic embed tag is used below. Each development environments plugin will have its own unique parameters which can be added to the basic width and height options.

    To embed a SuperCard project to be played by the Roadster plugin:
        <EMBED SRC="http://www.myserver.edu/multimedia/myproject.sca" WIDTH =512 HEIGHT = 342>