Adding Multimedia and Other Objects

This article reviews some of the ways to be creative and expand the functionality of your Web site through the use of plug-ins and extensions. While a browser’s inherent capabilities are for displaying styled text and limited image styling, its capabilities can be extended by the use of newer technologies that allow streaming audio and video, enhanced interactivity for forms, easier development environments for Web designers, downloading and integration of greater security features, and improved data storage and retrieval methods. These technologies are often freely available and are more commonly known as plug-ins or extensions.

A plug-in, like an extension, is a program that extends the capabilities of a browser. These may be used within software development environments, with e-mail clients, with graphics software and media players and, most relevant to this article, Web browsers. Some popular Firefox customizable extensions (plug-ins) would be Acrobat Reader, Flash, Java, QuickTime, RealPlayer, and MediaPlayer. We will be discussing in great detail the use of the

Flash plug-in as it is currently used in CS3. Though the list is constantly shifting, some very useful extensions for Web development are FireFTP, WebDeveloper (also known as the ‘‘Swiss Army Knife for coding’’), Firebug (for taking care of CSS, JavaScript, and HTML), Greasemonkey (create and or implement previously created JavaScript on your Web page), Internet Explorer Tab (for rendering sites on Internet Explorer), and Nuke Anything Enhanced (allows you to just get the desired content and not the extraneous advertising from a Web page).

Different plug-ins have varying attributes, so you really need to fully acquaint yourself with any new plug-in in order to use it to the fullest possible extent. If you would want to explore the outer limits of what you can do with Web pages, you must be willing to sail in the mystical waters of the siren sea and hear the haunting melodies of the Web (and beware the dragons, of course!). Here is a short list of good references to plug ins to get you started

- http://www.chami.com/htlm-kit/plugins

- desktop.google.com/plugins

- http://www.wmplugins.com

- http://adobe.com/products/plugins/photoshop/

- https://addons.mozilla.org/en-US/firefox/

- http://thepluginsite.com/

There is a technical distinction between a plug-in and an extension. A plug-in is a well-defined program that often runs on a host application’s user interface. An extension may run on its own interface and is not as tightly defined. We tend to use both terms interchangeably.

Adding Audio

Before we get into the details of how to embed an audio file in your Web page (in other words, to make the sound an automatic and integral part of the page), consider that there’s a very easy way to add sound. And it’s a way that avoids a common problem. One of the most important rules of good Web design is this: If you’re going to use background sound on your site, ensure that you give your visitors some way to turn it off . Not everyone appreciates a soundtrack accompanying his or her Web surfing. And, even if people do enjoy sound, they grow tired of the same thing repeating endlessly. If you make it impossible for visitors to opt out of the sound, you’ll lose some of them. There are ways to do this with embedded sound, as shown later in this article, but there’s also a simple way to keep everyone happy. Simply by linking to the sound file instead of embedding it, you give your site visitors the option of whether to listen to the sound or not. All you do is create the same kind of link as you would to another Web page or a graphics file. For example, if you wanted to play an MP3 song, you could use this code:

   <A href="overtheseatoskye.mp3">Click here to listen to the
   reflection of your soul</A>

That’s all there is to it. Anyone who wants to hear the music can click the link. Anyone who doesn’t want to hear it doesn’t have to.

Choosing a file type

Plug-ins enable you to play practically any kind of audio file in a Web browser. However, you need to consider just how important the music (or other sound) is compared to how much it can delay the download of your Web page. You have several different file types from which to choose:

- WAV A sound file in the WAV format (Waveform audio file) is hideously large when compared to other options. This file type has proven to be enduringly popular for Windows users. It can use either 8

- or 16-bit sampling rates, recorded in either mono or stereo, and has .wav as its extension. It was jointly developed by both Microsoft and IBM. Waveform, of course, refers to the analog nature of sound that is digitally sampled and transferred to other formats.

- WMA An audio file format for encoding digital audio. It is similar to MP3, though capable of compressing digital audio files at a higher rate and matching a variety of bandwidths. Its extension is .wma.

- MIDI When it comes to audio file formats on the Web, for the longest time, MIDI files (which end in either .mid or .midi extensions) were king. MIDI files, rather than being recordings in digital format, are sets of instructions on how to reproduce a sound by using common instruments. They are pretty restricted in use to music files, since they record data on note characteristics such as pitch and length, and music synthesizers. You would not use this format to record sounds that roll trippingly off the tongue. However, their file sizes can be very small, making them ideal for non-speech use on Web pages.

- Au This derives from audio. It records in 8-bit mono and is used with Unix systems.

- RealAudio RealAudio is a proprietary format of Real Networks used for streaming audio data to a source over limited bandwidth systems. Its typical extensions are .rm, .ra, and .ram. Because file sizes tend to be smaller than some other file types, the sound quality may be lower.

- SND and AIFF For the growing base of Mac aficionados, you have SND and AIFF file types. AIFF (Audio Interchange File Format) is rather like the WAV file type in terms of capabilities (such as variable sampling rates, as well as mono or stereo options). SND is currently not a very well-supported file format, but it may gain increased support as the Apple share of the digital music market expands.

- Ogg This is an open source audio compression format for the playing and storage of digital music. It uses Vorbis. The extension of Ogg is .ogg. Another popular free open source audio compression format, flac, is available at: flac.sourceforge.net/.

- MP3 With its compression algorithm, the MP3 file format offers an almost unbelievable capacity for storing CD-quality sound in a relatively tiny file compared to earlier digital recording formats. The key word here is ‘‘relatively’’ the longer the music (or other sound), the larger the file. It’s not unusual for a 2-minute song to take up 3MB, and that adds a stiff penalty to your Web page’s download time. Whatever format you use, it’s a really good idea to keep the sound duration as short as you can. Unless you’re selling digital albums, think in terms of seconds, not minutes.

- MP4 Though designed to transmit video and images over a smaller bandwidth, MP4 also is used for audio transmit through ACC MPEG-4 Audio. iTunes uses it. The extensions are .m4a and .m4p.

This is an area of high fluidity, and changes/improvements are constantly being made.

Embedding audio

We recognize that background sound (sort of a soundtrack to a Web page) does appeal to some Web designers. We’ll show you how to make your background sound jump through hoops if you want it to. Many Web browsers can natively play music and do not need plug-ins do the job. In any event, except for one issue that we cover, you will not need to concern yourself with the particular brand of music plug-in your visitors are using. Many different ones exist, and few Web browsers lack the capacity to play MIDI, MP3, or several other audio files currently on (and off) the above list. Audio files are embedded in Web pages with the OBJECT element or the EMBED element. The basics can be handled relatively easily, as the following example demonstrates:

   <html>
   <body>
   <object title="A Cool Song" data="Mission Impossible.mid">
   Sorry I can’t play your song!
   </object>
   </body>
   </html>

If you use the <embed> tag, rather than the <object> element, to link to an audio file,

   <EMBED src="url of file" width="number" height="number">
   </EMBED>

This code has the absolute minimum amount of information necessary to add sound. All it does is to specify the location and name of the audio file. If you wanted to play a MIDI file called softsong.mid, you could fill in the blanks like this:

   <EMBED src="softsong.mid" width="200" height="100">
   </EMBED><object title="A Cool Song" data="Mission Impossible.mid" >

The width and height attributes, which are required, seem a bit strange at first after all, this is a sound, not an image or a movie. How can it have dimensions? Well, it’s the controls that are used to start, stop, and play the sound, as well as to change its volume, that are at issue here. The problem is that you don’t know what plug-in someone’s using. That means you don’t know what the controls are going to be, let alone how large they’ll be. The ones in the example code pretty much cover all the bases, however. You can actually set up things so that the controls don’t show on the Web page. However, you still have to specify the width and height attributes. Of course, the numbers could be anything you wanted under those circumstances. To make the controls disappear, you use the hidden attribute:

   <EMBED src="softsong.mid"" width="200" height="100" hidden="true">
   </EMBED>

This attribute takes a value of either true or false, but there’s not much point to using false if you don’t want the controls hidden, just don’t use the hidden attribute. If you hide the controls, you make them inaccessible to your visitors, which means that they cannot turn off the sound. This is a fast way to annoy people. It’s usually preferable to leave the choice up to them. A less invasive attribute is autostart, which does just what its name implies it plays the sound file automatically when the page loads into a visitor’s Web browser. It also takes values of true or false, and once again, there’s no reason to use false, because that just yields the same result as not using autostart.

   <EMBED src="softsong.mid" width="200" height="100" autostart="true">
   </EMBED>

If you want the sound to play more than once, you can set it to start over again when it finishes. This is done with the loop attribute. This attribute takes a value of true, false, or the number of times to play the sound. As you’d expect, there’s no point to specifying loop="false" because false is the default value. To set a sound to play forever, you use the following code:

   <EMBED src="softsong.mid" width="200" height="100" loop="true">
   </EMBED>

To set it to play four times, specify that number as the value:

   <EMBED src="softsong.mid" width="200" height="100" loop="4">
   </EMBED>

This, as you might imagine, is another touchy area. While some people enjoy listening to a hot new song over and over again, even the best music can get old very quickly if it’s repeated endlessly.