Integrating Technology in the Foreign Language Classroom
So far, we have seen that you could have added sound to a web page simply. A better option is to embed the audio right into the web page where the text. The HTML audio tag allows the embedding of sound files into a web page. Read our in-depth guide to find out about its possibilities.
Embedding a sound in a web pageSo far, we have seen that 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 to see how such a simple link works on your computer with your browser settings.
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.)
HTML5 <audio> tag.
Recent updates to web page design call for a simple audio object that will work with current web browsers. The <audio> tag uses your browser's built-in audio player. This is the format we generally recommend using. It is easy, but it gives you limited control of the appearance of the audio object.
Your browser does not support the audio tag. You will need to place the code for the audio object into the Source code for your web page. The following code places an object on the page to play the song 'maquillaje.mp3'. If the code does not work in the user's browser, an error message will display.
<audio controls>
<source src='maquillaje.mp3' type='audio/mpeg'>
Your browser does not support the audio tag.
</audio>
<source src='maquillaje.mp3' type='audio/mpeg'>
Your browser does not support the audio tag.
</audio>
In KompoZer, you may need to write the source code this way to prevent errors:
<audio controls>
<source src='maquillaje.mp3' type='audio/mpeg'></source>
Your browser does not support the audio tag.
</audio>
<source src='maquillaje.mp3' type='audio/mpeg'></source>
Your browser does not support the audio tag.
</audio>
You can copy this code and use it in your own pages, but be sure to change the sound file name to match your own sounds. The width of the HTML5 <audio> object can also be controlled by specifying its size in pixels:
<audio controls>
Your browser does not support the audio tag. <audio controls>
Your browser does not support the audio tag.
The following two articles explore how all this works:
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/
Yet Another Way - MP3 Player using Flash:
This flash based player looks nicer than the default HTML5 player, but it is more limited in where it will work. The player itself is located on your web site and is downloaded with your web page, solving come, but not all, compatibility issues. However, using it is quite a bit more complicated than HTML5.
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>
<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.
Although this is usually a good solution, fairly easy and giving you good control over the appearance of the object, I still recommend the HTML5 solution for your projects because there are fewer things that can go wrong.
Here are some other players that use HTML5 but improve on its functionality.
Return to Syllabus
- HTML Tutorial
- HTML References
- HTML Resources
- Selected Reading
Sometimes you need to add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media type.
You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag. You could, for example, use <embed> to display a movie of your choice, and <noembed> to display a single JPG image if browser does not support <embed> tag.
Example
Here is a simple example to play an embedded midi file −
The <embed> Tag Attributes
Following is the list of important attributes which can be used with <embed> tag.
Note −The align and autostart attributes deprecated in HTML5. Do not use these attributes.
Sr.No | Attribute & Description |
---|---|
1 | align Determines how to align the object. It can be set to either center, left or right. |
2 | autostart This boolean attribute indicates if the media should start automatically. You can set it either true or false. |
3 | loop Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all (false) |
4 | playcount Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE. |
5 | hidden Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes. |
6 | width Width of the object in pixels |
7 | height Height of the object in pixels |
8 | name A name used to reference the object. |
9 | src URL of the object to be embedded. |
10 | volume Controls volume of the sound. Can be from 0 (off) to 100 (full volume). |
Supported Video Types
You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types inside embed tag.
- .swf files − are the file types created by Macromedia's Flash program.
- .wmv files − are Microsoft's Window's Media Video file types.
- .mov files − are Apple's Quick Time Movie format.
- .mpeg files − are movie files created by the Moving Pictures Expert Group.
This will produce the following result −
Background Audio
You can use HTML <bgsound> tag to play a soundtrack in the background of your webpage. This tag is supported by Internet Explorer only and most of the other browsers ignore this tag. It downloads and plays an audio file when the host document is first downloaded by the user and displayed. The background sound file also will replay whenever the user refreshes the browser.
Note − The bgsound tag is deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use HTML5 tag audio for adding sound. But still for learning purpose, this chapter will explain bgsound tag in detail.
This tag is having only two attributes loop and src. Both these attributes have same meaning as explained above.
Here is a simple example to play a small midi file −
This will produce the blank screen. This tag does not display any component and remains hidden.
Internet Explorer can also handle only three different sound format files − wav, the native format for PCs; au, the native format for most Unix workstations; and MIDI, a universal music-encoding scheme.
HTML Object tag
HTML 4 introduces the <object> element, which offers an all-purpose solution to generic object inclusion. The <object> element allows HTML authors to specify everything required by an object for its presentation by a user agent.
Here are a few examples −
Example - 1
You can embed an HTML document in an HTML document itself as follows −
Here alt attribute will come into picture if browser does not support object tag.
Example - 2
You can embed a PDF document in an HTML document as follows −
Example - 3
You can specify some parameters related to the document with the <param> tag. Here is an example to embed a wav file −
Example - 4
You can add a flash document as follows −
Example - 5
You can add a java applet into HTML document as follows −
The classid attribute identifies which version of Java Plug-in to use. You can use the optional codebase attribute to specify if and how to download the JRE.