|Jean LeLoup & Bob Ponterio
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:
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.
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">
showcontrols="1" showstatusbar="0" showdisplay="0"
autorewind="1" height="45" width="210"></embed>
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:
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">
WIDTH="160" HEIGHT="16" AUTOPLAY="false" CONTROLLER="true"
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
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.
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" />
Return to Syllabus