1. Embedding Media into Web Pages
Lecturer – Steve Clark

2. Optimizing Audio
There are a number of ways to reduce an audio file for downloading via a web page.
Length of clip
Number of channels
Bit depth
Sampling Rate

3. Adding Non-streaming Audio
There are many ways to access an audio file by using a HTML document.
Link to file with an anchor <a>
Embed the plug-in player with <embed> tag
Sounds can also be used as backgrounds that begin playing automatically when the page downloads.

4. Adding Non-streaming Audio
A Simple Link
You can use an anchor tag <a> to link an audio file from a web page:
<a> href=“Majest3.wav”>play the song.</a>
When the reader clicks on the linked text the browser will retrieve the file from the server and launch a helper application to play the file.
It is good web design to advise user of the size and type of the audio file to be downloaded.

5. Adding Non-streaming Audio
<embed> for use with plug-ins
When you use the <embed> tag, the browser places the plug-in controls in the flow of the text like an image.
<EMBED SRC="Beethoven's Fur Elise.rmi" CONTROLS="console" HEIGHT=160 WIDTH=145 AUTOSTART="false"></EMBED>
Note that when you use a plug-in, the audio will stop playing when the user leaves the page.
Load Page

6. Adding Non-streaming Audio
Background Sounds
There are several ways to make an audio file start automatically when a web page loads.
Note that the disadvantage of using background sounds is that the user has no way of turning the sound off.
Also a large audio file will force a potentially lengthy download time.

7. Adding Non-streaming Audio
For internet explorer (only) <bgsound> tag:
<BGSOUND> SRC=“Ding.wav” LOOP=3>
Load background sound 1 web page
For Explorer and Netscape use <bgsound> tag and <embed> tag that hides the control panel:
<EMBED SRC=“Drumroll.wav” autostart=true hidden=true></EMBED>
<NOEMBED><BGSOUND=“Drumroll.wav”></NOEMBED>
Load background sound 2 web page

8. Adding Non-streaming Audio
META TAGS
You can also make audio play automatically with client-pull by using the <meta> tag:
<META> http-equiv=“refresh” content=“1;url=Fall_01.mid”>
This causes the page to refresh and audio to play after 1 second.
Load background sound 3 web page

9. Adding Streaming Audio
Like Non-streaming there are two methods for adding streaming audio to a web page.
Using a link <a>
Using an <embed> tag
Embedding controls allows the design of custom interfaces.
Note Audio will stop playing when the user leaves the page.

10. Adding Streaming Audio
Each technology’s plug-in has its own set of attributes.
Some plug-ins require the link to be made to a go-between or reference file.
When accessed via the link, they pass the URL of the actual media file to the appropriate plug-in, which requests the audio stream from the server.

11. Adding Streaming Audio
RealAudio’s reference files are called “metafiles” (suffix .ram).
The link is made to the metafile not the RealAudio file itself.
<A HREF=“song.ram”>Link to the song</A>
The metafile contains the URL that points to the RealAudio file (suffix .ra):
pnm://[ip.address]/song.ra

12. Adding Streaming Audio
Metafiles are useful for maintenance and control purposes.
To change the audio, all you do is change the tiny metafile, rather than the HTML source code.
You can also call multiple streaming media files from one metafile. Where one link plays all files.

13. Adding Streaming Audio
Some attributes for various plug-ins:
src=URL – Defines URL of the audio file
width=value – sets size of control panel
height=value – sets size of control panel
loop=true/false/number – to play once set to false
autostart=true/false – When true starts automatically

14. Adding Video
Video files can be linked to HTML pages using the same methods as audio files
Using a link <a>
Using an <embed> tag
Customize control panel
Indicate video file size (downloading)
Indicate speed of transfer – modem, cable
Link to reference file for streaming

15. Adding Video Using an anchor tag to download.
<A HREF=“radar.avi”> Check out video (220Kb) </A>
Using an embed tag the browser looks for the appropriate plug-in player
<EMBED SRC=“radar.avi” AUTOPLAY=false WIDTH=160 HEIGHT=120></EMBED>