Integrating Technology in the Foreign Language Classroom

So far we have been adding sound to a web page simply by setting up a link to the sound in much the same way that we make a link to another web page. When we do this, we have no control over how a user's web browser will play the sound. It might open an external application, such as Media Player or WinAmp or play the sound within a new browser window. If the sound is part of a lesson, there might be text, vocabulary support, interactive questions, images, or other pedagogical materials that you want the student to be able to see while the audio is playing. So you may need to have more control over how the sound is played.

Another option is to embed the audio right into the web page where the text or activities are located, thus integrating the audio within the language lesson. We do this by placing an object on the page, and this object has all of the information needed to play our sound.

Embedding audio in this way is significantly more complicated than simply creating a link, but the advantages are clear. To accomplish this, we need to place some special code in the HTML Source of the web page. However, once we have one working sound, we can simply copy this code and paste it into any location where we want to put a new sound. A few minor changes can then allow us to set up the object for each new sound file.

Here is the basic HTML code for the  song file maquillaje.mp3 by Mecano:

<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
id="mediaplayer1" height="40" width="120">
<param name="Filename" value="maquillaje.mp3">
<param name="AutoStart" value="False">
<param name="ShowControls" value="True">
<param name="ShowStatusBar" value="False">
<param name="ShowDisplay" value="False">
<param name="AutoRewind" value="True">
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
src="maquillaje.mp3" autostart="0"
showcontrols="1" showstatusbar="0" showdisplay="0"
autorewind="1" height="40" width="120"></embed>
</object>

1. Copy all of the object code found in the sample above (the part in red), from and including the first bracket <object classid .......  down to and including the final bracket  </object>. 
2. In your new page, edit the HTML source code (NOT the WYSIWYG design view) and paste the code where you want the embedded sound to appear.
3. Change the filename value in both
   <param name="Filename" value="maquillaje.mp3">
   and in
   src="maquillaje.mp3".
   Just replace maquillaje.mp3 by myvoice.mp3 (or by whatever your own audio file name might happen to be).
4. Remember to save your work.
5. Of course, you must actually put your audio file in the folder with your new web page or your web page won't know where to find it. Duh!

You might get this error message when opening a page with a sound object (this was a bug in older Internet Explorer setups):

If this happens, simply click to allow the sound to play.

Note that this code puts a Windows Media Player object in your page. It is possible to use a different classid to embed different players, such as Quicktime, Yahoo, Google, or other Flash players.

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

You can also play around with the height & width to get the effect you desire. For instance:

For more information: