Doug Helvey -- Embedding Multimedia in a Web Page

Audio clips can enhance instruction in many ways. In the audio clip below I briefly suggest a couple of ways that could be true even in online training in the human services field.

To play the clip you will need to have either the Quicktime Player or QuickTime Pro installed on your computer for the file to play. This is a 217 Kb audio file that will take a few seconds to load on a slow internet connection.

When the controller bar appears click the play button to start the recording.

Note: If your are using Internet Explorer as your web browser, you may get a message regarding allowing scripts or ActiveX controls. You can click on that that message. You will then get a dialog box asking you if you wish to "Allow Blocked Content." Clicking that will then bring up a "Security Warning" box. When you click this the controller will finally appear. Then you will need to hit "enter" or the "spacebar" to use the controller.

To download the audio file above, click the drop down menu on the right end of the controller. Then select Save as Source.. (See the image below.) This may work only if you have QuickTime Pro.

Click here to download the script as a PDF document.

Audacity was used to record the sound file. (Click here to go to my Audio Recording and Editing Page for a tutorial on how to record using Audacity.) I used a Logitech headset plugged into the 1/8" inputs on a Windows XP system. A script was read to create a short podcast.

The audacity project file was exported to a WAV format. That file's size was 5.02 MB which was too large to be embedded on a web page. I then compressed the file using QuickTime Pro using the following process. (For more specific information on this process go to my Audio Recording and Editing Page.)

First I opened the WAVE file in QuickTime Pro.

Next I clicked the Options button to set the Sound Settings.
The Sound Settings were set for:
AAC compression
Sample rate at 32 KHz
Channels: Mono
Sample size at 28 kbps

I then Saved the file as a QuickTime Movie.

The reduced the size from the 5.02 MB WAV file to a much more manageable 217 KB .mov file.

The file was then uploaded to the server so that it could be embedded in a web page and launched with a controller.

In order to be compatible with various internet browsers, such as Internet Explorer, Netscape and Firefox, both the Object and the Embed tags were used. The Embed tags were nested inside the Object tags.

Object Tags

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" WIDTH="160" HEIGHT="16" align="middle">
     <PARAM name="SRC" VALUE="audio/advantages_audio_clip.mov">
     <PARAM name="AUTOPLAY" VALUE="false">
     <PARAM name="CONTROLLER" VALUE="true">
</OBJECT>

Above are the Object Tags used.
The classid and codebase indentify the plugin as QuickTime.
The width and height set the size of the controller. A sound file controller is 160 pixels wide and 16 pixels high.
The align was set to "middle" so the controller would appear in center of the page.
Three parameters were set:
SRC to give the path and name of the QuickTime file;
Autoplay was set to "false" so the sound file would not play until the "play" button was clicked;
Controller was set to "true" to make it visible.

Embed Tags

<EMBED SRC="audio/advantages_audio_clip.mov" WIDTH="160" HEIGHT="16" align="middle" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>

Above are the Embed tags.
As with the Object tags:
The the identity of the plugin is specified: "Pluginspage;"
The width and height for the controlled are given (160 and 16);
The scr indicates the path and the name of the sound file;
Autoplay was set to "false" so the sound file would not play until the "play" button was clicked;
Controller was set to "true" to make it visible.

Important Note

In order to work properly the values for each attribute must be set identically to match in both the Object and the Embed tags.

Combined Tags

Below is the combined code that is required for the embedded sound file to operate properly in most browsers.
The Object Tags are in blue and the Embed tags are in red.

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" WIDTH="160" HEIGHT="16" align="middle">
     <PARAM name="SRC" VALUE="audio/advantages_audio_clip.mov">
     <PARAM name="AUTOPLAY" VALUE="false">
     <PARAM name="CONTROLLER" VALUE="true">
<EMBED SRC="audio/advantages_audio_clip.mov" WIDTH="160" HEIGHT="16" align="middle" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>

HTML Code Used to Embed the QuickTime File (Advanced #2 Method)