Embed Sound in Your Page

Have you ever visited a Web site and found yourself listening to background music that started playing automatically? Or perhaps you heard a recorded greeting, welcoming you to the site? This is an easy way to begin using audio. As long as you keep the clips short, the resulting file size will be small and manageable. You won’t need to worry about long download times delaying your sounds.

Embed Files with <object>

As you’ll see later in this chapter, you can embed sound and video files with both the <bgsound> and <embed> elements. However, if you want to write “standards-compliant” XHTML, your method of choice should be the <object> element. The <object> element is in a class by itself. If you’ve worked through Chapter 10 on CSS, you learned about the <div> and <span> elements. They are generic elements that enable Web authors to apply styles apart from the limitations of more specific elements. <object> is also a generic element, but you use it for inserting objects in Web pages. You can define an “object” as being just about anything you want to put in a Web page. Its use is not restricted to audio or video files. You can use it instead of <img /> to insert pictures. The <object> element is also useful for including Active-X controls, Java applets, text, and even other Web pages in your page. This is truly an “all-purpose” element. Eventually, the <object> element will be the only way of embedding anything in a Web page.

Because <object> can embed many different types of objects, you must inform the browser just what kind of object you are putting in. To embed a sound file in a Web page with the object element, follow these steps:

1. Open template.htm and save it as object.htm.

2. Add the opening object tag:

   <object>

3. Use the data=" " attribute to tell the browser where to find the file you want to embed. The value for this will be the URL of the file you want to embed:

   <object data="greeting.wav">

4. Now that you’ve told the browser where to find the file, you must tell it what kind of file it will be embedding. For this, you use the type=" " attribute with the MIME type of the file. In this case, it will be audio/wav:

   <object data="greeting.wav" type="audio/wav">

5. You should add the height and width attributes to specify the amount of space allotted to the plug-in:

   <object data="greeting.wav" type="audio/wav"         height="125" width="125">

6. Add the autostart="true" attribute to allow the sound to play as soon as it loads:

   <object data="greeting.wav" type="audio/wav"         height="125" width="125" autostart="true">

7. Add the closing tag. Even though the <object> element functions as an empty element, it still requires a closing tag:

   <object data="greeting.wav" type="audio/wav"         height="125" width="125" autostart="true"> </object>

Just to give the page some substance, try adding a line that reads <h1>This page shows the &lt;object&gt; element in action</h1>. Your finished code should resemble the illustration that follows the XHTML:

<object data="greeting.wav" type="audio/wav"          height="125" width="150" autostart="true"> </object> <h1>This page shows the &lt;object&gt;<br />     element in action.</h1> 

Tip

Any time you want to display an HTML tag as part of a Web page, you must enclose the text with the character entities for the “less than,” &lt; , and “greater than,” &gt; , signs. If you typed in only the tag, the browser would interpret it as an element and not as part of the text of your document.

Understand MIME Types

In the preceding example, you had to identify what kind of file the browser should expect by using the type attribute. The value you supplied was called the MIME type. MIME stands for Multipurpose Internet Mail Extensions. It was developed as a means for enabling non-text files to be transferred by e-mail. When you use the <object> element to embed a sound or video file, you must identify the file by its MIME type. This includes a basic file type such as audio, image, video, and so on, followed by a slash and a more specific type (often the file’s normal extension). For example, the preceding entry was for a .wav file. In that case you entered type="audio/wav".

Tip

You can find a comprehensive list of MIME types at ftp://ftp.isi.edu/in-notes/iana/ assignments/media-types/media-types.

The MIME types you generally encounter with audio and video files are listed in Table 11-2.

Table 11-2: MIME Types

Media Type	File Extension	MIME Type
m-Law	.au	audio/basic
Wave	.wav	audio/wav
MPEG	.mp3	audio/mpeg
QuickTime	.mov	video/quicktime
MPEG	.mpg	video/mpeg
Microsoft Video	.avi	video/msvideo

Add Background Sound with <bgsound /> (Internet Explorer Only)

If you want to add a “background track” to your Web page, and you’re confident that your visitors will all be using Internet Explorer, you might want to experiment with the <bgsound /> element. This element is an IE extension to HTML. The good news about <bgsound /> is that it is very simple to use; the bad news is that it works only on Internet Explorer. However, it’s a nice, easy way to practice working with audio files.

To insert a background sound with the <bgsound /> element, just use the src attribute to identify the sound file you want to attach. In the case of the following example, the name of the file is bgsound.wav, but you could put the name of any audio file in there as a value. One additional attribute is loop. The loop attribute allows you to specify how long the sound should play. If you want an endlessly repeating loop, add the value infinite. If you want the greeting to play only once when the page is loaded, insert a numerical value of 1. By increasing the numerical value, you increase the number of times the sound plays. Thus, a value of 10 will cause the sound to play ten times.

Try typing in the following code to create a simple page with a background sound. Save it as bgsound.htm. Experiment with different sound files and different values for the loop attribute.

<html>    <head>       <title>Bgsound Sample</title>    </head>    <body>       <h1>This is a sample of a page with a background sound</h1>       <bgsound src="/books/4/238/1/html/2/bgsound.wav" loop="3" />    </body> </html>

Although the <bgsound /> element was never incorporated into the HTML recommendation, it remains the easiest way to embed a sound on a page. However, Netscape provides a different model for creating a page with inline sound.

Use <embed> for Inline Sounds (Netscape Extension)

What is an inline sound? It’s simply a sound that has been placed in a page “inline,” like any other element. Sometimes inline sounds are referred to as embedded sounds. The idea is the same as with external and inline images. If you merely write a hypertext link to an image file as you would with any other page, you are using an external image. When someone clicks on the link, the browser displays the image as a separate entity, rather than as part of the page that linked to it. On the other hand, if you use the <img /> element to actually place the image on your page, you are using an inline or embedded image. Sound files work the same way; however, instead of the <img /> element, you can embed sound files with the <embed>.

Add Inline Sound with <embed> </embed>

Netscape’s <embed> </embed> extension is more versatile than IE’s <bgsound />. With <bgsound /> you are limited (as its name implies) to embedding a background sound. The <embed> element, on the other hand, enables you to place different objects in your page, including audio and video files. Although <embed> is supported by both Netscape and IE, it has been deprecated in favor of the <object> element. Unfortunately, some older browsers will not recognize <object>. So, for the present it’s not a bad idea to be familiar with <embed>. To experiment with the <embed> element, try the following steps:

1. Open bgsound.htm and save it as embed.htm.

2. Delete the line that reads

   <bgsound src="/books/4/238/1/html/2/bgsound.wav" loop="3" />

3. In its place type

   <embed src="/books/4/238/1/html/2/embed.wav">

   Tip

   You can substitute any sound file you choose in place of embed.wav.

4. Add the autostart="false" attribute to tell the browser not to start the audio clip automatically:

   <embed src="/books/4/238/1/html/2/embed.wav" autostart="false">

5. Specify the size of the “player” the browser will display by using the height=" " and width=" " attributes:

   <embed src="/books/4/238/1/html/2/embed.wav" autostart="false"   
   height="20" width="125">

6. Add a closing tag:

   <embed src="/books/4/238/1/html/2/embed.wav" autostart="false"  
   height="20" width="125"> </embed>

Caution

Even though embed works like an empty element (nothing in between the two tags), a closing tag is required.

Your HTML for a page with an embedded sound file should resemble this code:

<html>    <head>       <title>Using the Embed Element</title>    </head>    <body>       <embed src="/books/4/238/1/html/2/embed.wav" autostart="false"              height="20" width="125"> </embed>       <h1>This is a sample of a page<br />           with an embedded sound</h1>    </body> </html> 

When you save your page and display it in a browser, you should see a set of controls in the upper-left corner of the browser window. These controls function like the controls on a tape recorder and allow the visitor to play and replay a sound.

Use <embed> for Background Sound

What if you want to create a background sound using the <embed> element? You merely have to add one attribute and modify another. You must add the loop attribute as you did with <bgsound/>. With <embed>, however, loop uses a different set of values. Instead of numerical values or infinite, here loops can be given a value of only true or false. False turns the loop off; true makes the sound loop endlessly. In addition to adding the loop attribute, you must change the value in the autostart attribute to true. This will cause the sound to begin automatically. You can also delete the height and width attributes, as they are not needed for a background sound. Your modified code would look like this:

<embed src="/books/4/238/1/html/2/embed.wav" autostart="true        loop="true"> </embed>. 

Did You Know?—Background Sounds Can Be Quite Annoying

As a rule, background sounds tend to be very irritating to your visitors. More often than not, an endlessly looping background sound will drive people away from your site rather than draw them to it. Unless you have a good reason to include background sound, you're probably better off avoiding it. Remember, you don't want to include effects on your Web page just because they're “cool.” The whole idea is to get people to visit, hopefully more than once. If your sounds are an irritant, get rid of them.

Use <embed> and <bgsound /> Together for Maximum Compatibility

Because both <embed> and <bgsound /> are extensions that are not part of the official HTML specification, you might encounter compatibility problems with some browsers if you use only one of them. If you plan to use these elements to add background sound to your pages, it would be wise to use both of them. For example, if you were to modify the original page created in this chapter, bgsound.htm, to include both <bgsound /> and <embed>, your code might look like the following:

<html>    <head>       <title>Bgsound Sample</title>    </head>    <body>       <h1>This is a sample of a page           with a background sound</h1>       <bgsound src="/books/4/238/1/html/2/bgsound.wav" loop="3" />       <embed src="/books/4/238/1/html/2/embed.wav" autostart="true"                   loop="true"> </embed>.    </body> </html>

Use <noembed> </noembed> for Non-Compatible Browsers

If you’re concerned about visitors to your site who might be using browsers that do not support the <embed> element, you can provide substitute content for them with the <noembed> element. Similar to the <noframes> element, <noembed> displays alternative content in browsers that do not recognize the <embed> element. You could include a textual description or a title for your video, thus providing your visitors with some idea of what they are missing.

Project 18: Embed Video in Web Pages

After you have embedded some audio files in an HTML document, adding video is easy. For this project, you will create three basic Web pages and insert video in each one by using a different means. Your primary tools will be the <object> and <embed> elements. However, an easier option to start off with is one that, unfortunately, works only with Internet Explorer.

Tip

To complete this project, you will need a video file. The easiest source for video files is your own computer. If you’re working with Windows, simply click Start | Find or Search. Choose Files or Folders in the pop-up menu. In the Named window, type *.avi or *.mov. Make sure that the Look In option is set to C:\ (or whatever drive letter you wish to search) and that the Include Sub-folders option is checked. Then click Find Now and you should quickly have a reasonable number of video files to choose from. If you don’t find any .avi files on your C:\ drive, be sure and perform the same type of search for any CD-ROMs (particularly games) that you may have.

Add Video with the dynsrc Attribute (Internet Exporer Only)

Internet Explorer has provided an uncomplicated way to include video on a page without using either <object> or <embed>. You can add video files using the <img /> element with the dynamic source, dynsrc, attribute. Unfortunately, dynsrc is not supported beyond Internet Explorer, so you might not want to use it extensively. However, it’s an easy way to begin experimenting with video files. Besides, if you happen to be designing pages for a corporate intranet and you know everyone will be viewing your pages with IE, this is an easy way to add video to your pages.

Using the dynsrc="/books/4/238/1/html/2/ " attribute to add video to a page is as easy as adding an image. If you have read Chapter 6 on adding graphics, you will remember that a graphical image can be embedded in a page with the <img /> (image) element. For a JPEG or GIF image, the element is written <img src="/books/4/238/1/html/2/filename.jpg" />. To add a video instead of a still picture, use the dynamic source attribute instead of the source attribute. For example, to use dynsrc to add a video to a page, you would write the image element like this: <img dynsrc="/books/4/238/1/html/2/myvideo.avi">. The following HTML code creates a page with the sample.mov file displaying as soon as the page is loaded:

<html>    <head>       <title>Use <em>dynsrc</em> for Video</title>    </head>    <body>       <img dynsrc="/books/4/238/1/html/2/myvideo.avi" />       <h1>This video is added with the<br />           dynsrc attribute.</h1>    </body> </html>

When you display this page, you should see something like this:

Some other attributes you can add to work along with dynsrc="/books/4/238/1/html/2/ " are these:

• loop=" " As with <bgsound />, you can specify infinite to create an endless loop or a numerical value for the number of times you want the video to play.

• start=" " This allows you to specify when the video should start playing. Your choices are fileopen or mouseover. With fileopen (the default), the video begins playing as soon as the file loads. With mouseover, the image will not play until the mouse moves over it. Try modifying the preceding file to read <img dynsrc="/books/4/238/1/html/2/sample.mov" start="mouseover" />. Save the file and load it. When the page has loaded, move your cursor over the image and see what happens.

Add Video with <object>

To add video with the <object> element, you proceed in much the same way as you would if you were embedding an audio file. The primary difference is that you use the data attribute to identify the file, you specify in the type attribute that you are using a video file, and you include the proper MIME type. For example, to insert the video from the preceding illustration with <object>, you would write the markup this way:

<html>    <head>       <title>Use &lt;object&gt; for Video</title>    </head>    <body>       <object data="myvideo.avi" type="video/avi"               height="200"  width="200" >       </object>       <h1>This video was added with the<br />           &lt;object&gt; element.</h1>    </body> </html>

How to: Avoid Problems with Browsers that Don’t support <object>

The <object>element is a versatile tool that will eventually become a key player in XHTML. Because <object> can be used to embed any object in a page, it will eventually replace elements such as the image <img /> element. Unfortunately, many older browsers do not support <object>, thus limiting its usefulness. If you want to use <object> but also want to accommodate older browsers, simply nest the <imbed> element (along with the appropriate attributes) in between the <object> tags. Browsers that don’t support <object> will ignore the tags altogether and display the contents of the <embed> element. The nested elements would look like this:

<object data="videoFile.avi"                height="##" width ="##"      <embed src="/books/4/238/1/html/2/videoFile.avi"             height="##" width ="##"             autostart="true" loop="false" > </embed>  </object>  

As in the preceding code, you can use the height and width attributes to specify the display size for your video. Keep in mind that for your average visitor, the larger the display, the poorer the quality. Thus, you need to keep your height and width attributes to a reasonably small size. In the preceding illustration, the values for those attributes were set to 200 200 pixels.

Add Video with <embed>

The third alternative for embedding video on a page is Netscape’s <embed> element. This element is similar to <object>, but you need to use some different attributes. Instead of the data attribute, you use the src attribute to point to the video file. Also, with <embed>, you don’t need to use the type attribute. If you want the video to start automatically, use autostart="true". If not, make the value false. Also, a value of loop="true" causes the video to loop endlessly. False permits the video to loop only a single time. Use the following code to insert a video clip on a page with the <embed> element:

<html>    <head>       <title>Use &lt;embed&gt; for Video</title>    </head>    <body>       <embed src="/books/4/238/1/html/2/myvideo2.avi"               height="200" width="200"               autostart="true" loop="false"  >       </embed>       <h1>This video was added with the<br />           &lt;embed&gt; element.</h1>    </body> </html>

The preceding options work well, provided you are using only very short video clips. If your clips will run even 15–30 seconds, however, your visitors may become very impatient waiting for them to download. For long clips—audio or video—you need to look into streaming media.