Embedding Media into Web Pages Lecturer – Steve Clark

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

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.

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.

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

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.

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

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

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.

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.

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

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.

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

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

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>