Embedding Audio

Integrating Technology in the Foreign Language Classroom

Jean LeLoup & Bob Ponterio
SUNY Cortland
© 2012

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 betteroption 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. We will look at several different ways to do this. (You can download this practice page and the song to practice.)

Play the song:
	What is the name of the female lead singer?

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="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.

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:

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>.
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.
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).
Remember to save your work.
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 Quicktime:

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

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:

Doug Helvey -- Embedding Multimedia in a Web Page

How to stream music or audio from your web site ( Playlist streaming m3u files): http://www.nunzioweb.com/streaming_audio-example.htm

Embedding Flash players (Goggle, Yahoo, Odeo)

Demonstration of Different Ways to Play a Sound from a Web Page

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>

Return to Syllabus