Integrating Technology in the Foreign Language Classroom

  Embedding a sound in a web page

So far you could have added 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 it works at all). 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 and where it is located in your lesson. Try this song link.

A better 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 acts as an audio player to play our sound. We will look at several different ways to do this. (You can download this practice page and the song to practice.)

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 to create the Object and set up its Properties. 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="45" width="210">
<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="45" width="210"></embed>
</object>

Notice that the framing HTML tag is called Object and that there is also another tag within Object named Embed. These two tags repeat all of the information needed to play the sound; Object is for Internet Explorer and Embed is for Firefox/Mozilla. We won't go into the details about all the parameters that can modify the behavior of this object; instead we will keep it simple by just copying this object and making the minimal changes so it points to your own audio file. Although there are newer techniques to do this, the Object/Embed approach should work in most newer and older browsers.

Suppose you have a sound file named myvoice.mp3.  We can embed this sound in a new web page by following a few basic steps:

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. If you have trouble seeing where to place your sound object, make a target "XXXXX" to help you identify the correct location for pasting in the source code.
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. For instance, here is the code for Quicktime:

<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>

Finally, For these embedded players to work, the Media Player, Quicktime, or other software needs to be installed on the user's computer. The web page designer has no control over this. It is possible to get around this problem by placing a copy of the audio player on your own web site and making it a part of the page. Since this is a bit more complicated, we might look at this in a separate lesson.

For more information:

A Better Way - MP3 Player using Flash:

This flash based player is a better solution because it does not depend on the user having any software installed. The player itself is located on your web site and is downloaded with your web page, solving the compatibility issues.

http://flash-mp3-player.net/players/maxi/

Go to the site and download the mp3player file: player_mp3_maxi.swf

Put this file in your web site folder and point to it in your sound object. I will put it in its own folder, called mp3player, just to make it easier to find and also easier to point to.

 

Here is the Object Code that you would copy and paste into your web page Source Code. Note how data="mp3player/player_mp3_maxi.swf" points to the player that we downloaded and put in its own folder. The mp3 sound file name is in red in our example below; you would substitute your own sound file name.

<object type="application/x-shockwave-flash" data="mp3player/player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="mp3player/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=maquillaje.mp3&showstop=1&showvolume=1&bgcolor1=97B3D6&bgcolor2=085c68&volume=100&width=200&height=20" />
</object>

You can also shorten the width of the Flash Player to make a small "play" button with limited control.

Listen to this song by Mecano.

 

HTML5 <audio> tag.

More recent updates to web page design call for a simpler audio object that will work with current web browsers.

<audio controls>
<source src="maquillaje.mp3" type="audio/mpeg">
<p>Your browser does not support the audio tag. </p>
</audio>

The width of the HTML5 <audio> object can also be controlled:

<audio controls style="width:50px">

Native Audio in the browser: http://html5doctor.com/native-audio-in-the-browser/

HTML5 Audio — The State of Play: http://html5doctor.com/html5-audio-the-state-of-play/

Return to Syllabus