Adding Sound to Virtual Worlds

This document describes a simple technique for using sound in both types of virtual worlds, panoramic (using QTVR) and non-panoramic (using static images). In both cases we will use an invisible HTML frame to contain a QuickTime movie that contains only the audio clip. There are other ways to include sound, but this one is relatively simple, easy to understand, and versatile.

Parts I and II explain how to digitize a sound clip using SoundEdit 16 and how to create a movie that includes the clip. Part III discusses how to incorporate this movie into a panoramic project. Part IV addresses the single-image or non-panoramic solution.

Please understand two things about sound:

• You are not required to include sound in your final project.
  
  
• Because digital sound entails many complexities, you are ultimately responsible for solving any problems that arise.

I: Digitizing sound clips

1.1 The PowerMac 9600 named Olive Oyl has been configured to receive sound input from an external connection. A wire has been attached to this machine's sound ports. The wire terminates in a standard headphone connector. Plug the free end of this wire (i.e., the headphone connector) into the headphone port of a portable tape or CD player. Pressing Play on the recorder will send sound information straight to the Macintosh, and to SoundEdit when it is launched.

NOTE: Olive Oyl may be set to acquire sound from its internal CD-ROM drive, but because this process is likely to conflict with other software I do not recommend it. If you must reconfigure Olive Oyl's sound input, please re-set when you are finished -- other students may need to use the configuration I describe here. Please do not disconnect the input wire from the back of the machine.

If an attempt to record fails, go to the Monitors and Sound option under Control Panels and be sure the Sound Monitoring setting reads RCA In.

1.2 Launch SoundEdit 16 from the Apple menu. You will see a document window like this:

Click on the round red button in the control palette to start recording. Click on the black square to stop. Click on the right-facing black triangle to play your clip once it is recorded.

1.3 You will see a frequency graph or waveform of your sound sample in the large display area of the SoundEdit interface. If this waveform is mainly flat with a few small bumps, your sound needs to be amplified. (If you have a nice, scratchy waveform like the one shown below, skip this step.)

First choose Select All from the Edit menu or press the Control and A keys simultaneously. This should select your entire waveform. Next select Amplify from the Effects menu. You'll see something like this:

Type in the percentage of amplification you want and then click Amplify. The process should take only a few seconds.

1.4 If your clip sounds acceptable, skip this step; but if you notice tape hiss or other noise, you may want to dampen certain frequency ranges by using the Equalizer effect. Select part or all of your waveform and then choose Equalize from the Effects menu. You'll see something like this:

The virtual sliders in this image are set to dampen or remove the highest frequencies. Use settings like these to eliminate tape hiss. Click Equalize to apply the changes.

1.5 Save your clip by choosing Save As from the File menu. Under file formats, select WAVE, the standard Windows audio format. Add the extension .wav to your file. This step is essential.

1.6 Using File Transfer Protocol (Fetch on Olive Oyl), connect to Cow and transfer your sound clip to your personal folder. Since we have only one machine that can capture sound, you'll need to move elsewhere to continue working on your project. Please do not tie up Olive Oyl if others need to use SoundEdit.

II. Create an audio-only QuickTime movie

2.1 Move to another computer in the Hypermedia Room (all Gateways and Macs have the necessary software) and download your sound clip(s) via FTP. Situate your files in a convenient place such as a new directory on the desktop marked with your last name.

2.2 Launch QuickTime Movie Player from the Start or Apple menus. (For Windowes, look for it among the QuickTime options.) Select Open from the File menu and navigate to the location of your WAV file. QuickTime will open your WAV file as an audio movie.

2.3 Select Export from the File menu. You'll see an interface that looks a bit like this (the screenshot shown here is taken from a Macintosh, but it has the same elements as the Windows version):

Set the option on the Export pulldown menu to Movie to QuickTime Movie and set the Use option to Streaming 20kbps-Voice (or whatever other option seems appropriate for your content.)

Be sure to save your new QuickTime movie with the extension .mov. Pay attention to where the new file is being written.

III. Adding sound to a panorama project

3.1 Begin by setting up an HTML page something like this:

<frameset cols="100%,*" border="0">

<frame name="seen" src="panoPage.htm">
<frame name="unseen" src="blankPage.htm">

</frameset>

(A complete example with a working version of this code is available both on Raven and Cow.)

This frameset page creates two frames: one that occupies 100% of the visible area and another that occupies anything left over, which is what that asterisk means. Since the frame has a width of 0%, it is invisible. Fortunately, frames are useful even when they have no dimension or visibility.

The pages initially assigned to these frames -- panoPage.htm and blankPage.htm are more or less arbitrary, though the first of these pages must contain an <EMBED> tag to include the main panorama movie, produced in QTVR Authoring Studio as a scene. See the sample file on Cow for details.

3.2 If your project uses linked panoramas, use QuickTimeVR Authoring Studio to create a scene setup that looks something like this:

This scene has two component panorama movies (you'll have more than that) plus a bunch of URL objects. As you remember from Assignment 2, URL objects can refer to Web pages; but they can also refer to any other kind of document that may be invoked through the HTML location function. This happens to include QuickTime movies, and thus for our purposes, sound clips. The URL nodes here all refer to QuickTime movies (.mov files).

3.3 There's a slight catch, however. We need to load the QuickTime movies into that invisible frame -- that's the only way a single QTVR panorama can contain links to more than one sound. But QTVR Auithoring Studio doesn't let us target links to a particular frame. The solution lies in a little bit of JavaScript.

In Assignment 2, you entered the address of a Web page in the URL node. Here each node contains instead a variation on the following code:

javascript: playOut('soundFolder/nameOfSoundClip.swf')

This code calls a JavaScript function called playOut(which) that is defined on the panorama source page (panoPage.htm). Here's the function:

<script language="javaScript">
function playOut(which)
{
parent.frames['unseen'].document.location=which;
}
</script>

Thus all the pieces come together: When the initial frameset page is loaded, panoPage.htm goes into the visible frame, bringing with it the QTVR scene movie with all its linked hotspots. A blank page goes into the invisible frame.

Some of the hotspots in this movie are linked to other component panoramas built into the scene; others are not directly linked to anything, but simply pass that javascript: call to the browser. They also pass the name and pathway to a QuickTime movie (.mov file), which gets loaded into the invisible frame. The QuickTime movie plays the sound clip. Voila.

Here is a sample of a panoramic project with sound. All of its component files, sound clips as well as code, are available on Cow within vWorldsShared in a directory called panoWSound. If you're considering using sound in your final project, please download this directory and experiment with its parts.

IV. Adding sound to a static-image project

The following instructions assume you have read carefully through the discussion of sound in panoramic projects above. The procedure for static-image projects is considerably simpler, but you need to understand the principles, especially invisible frames and the use of QuickTime movies to carry sound clips. You may also want to review the instructions for non-panoramic projects posted two weeks ago.

4.1 Create a two-part, 100%/0% frameset as in step 3.1. This frameset page is the entry or index page for your project. Instead of panoPage.htm, the main or seen frame should initially contain the first location you want your users to see: in the case of our example this location corresponds to a page called point01.1200.htm.

4.2 Introduce JavaScript instructions into the appropriate location pages. The simplest way to do this is to insert the following code:

parent.frames['unseen'].document.location="soundfolder/soundName.mov"

If you are working from the code examples given out two weeks ago, the best place to insert this JavaScript statement is in the very first <SCRIPT> container within the document -- the one in which the four destination variables are assigned.

A complete example project is available on Cow in the vWorldsShared directory, in a subfolder called staticWSound. Look at the page point01.1200.htm if you're confused about where to put the sound instruction.

4.3 If you like, you may also cue sound from a mouseOver event -- that is, when the user passes the mouse pointer over a particular location on the screen.

Again assuming you are working from the template and examples given out two weeks ago, insert a new <AREA> tag into the <MAP> container that is built into the page. This <AREA> should look something like this:

<area shape="rect" coords="100,67,204,145" href="#"
onMouseOver="javascript: parent.frames['unseen'].document.location='soundFolder/soundName.mov'">

To see this technique in action, examine the page called point03.1200.htm in the staticWSound folder within vWorldsShared on Cow.

Obviously the coordinate values, name of sound directory, and name of sound movie will all be different in your version. You may also want to use oval or point as shape values. Remember to include the blank href value as shown here (the pound sign or # instructs the browser to reload the present page on mouseclick). The <AREA> tag won't work in some browsers without this feature.

Here is a sample of a panoramic project with sound. All of its component files, sound clips as well as images and code, are available on Cow within vWorldsShared in a directory called staticWSound. If you're considering using sound in your final project, please download this directory and experiment with its parts.