Using Sound in Your Site | Macromedia Studio MX Bible

< Day Day Up >

If a picture is worth a thousand words, what's a sound worth? It can be worth a lot, enriching the visitor experience greatly. But adding sound to your site pages presents a list of issues related to file types, plug-ins, and helper applications that vary from browser to browser, and platform to platform.

A Web browser needs information about the type of content it is expected to render. Multipurpose Internet Mail Extension Types, or MIME types, form a standard way of classifying file types on the Internet. Web servers and browsers all have a list of MIME types, so that they can transfer files of the same type in the same way, no matter what operating system (platform) they are working from. A properly configured browser opens the file in the browser (for example, HTML), plug-in (such as QuickTime or Flash), or helper application (such as Adobe Acrobat or Windows Media Player).

The developer's reality is that different browsers support different media types and, unfortunately, no browser supports every type of media available. Therefore, browsers make use of plug-ins and helper applications. Plug-ins are software programs that extend the capabilities of browsers in a specific way, giving you, for example, the ability to play audio samples or view video movies from within your browser. Internet Explorer browsers also use Active X technology (controls) to support different media and file types. Helper applications are programs that are assigned to handle multimedia file formats (audio, video, images, and so on) that a Web browser itself does not understand.

Many plug-ins begin their existence as helper applications but evolve to the plug-in method to provide a more seamless Web experience. Helper applications and plug-ins enhance the functionality of a browser, but helper applications are separate programs; the disadvantages of helper applications are

The user may need to wait for the application to load.
The user might not have enough memory to run a helper program.
In some browsers, helper applications or plug-ins may open in a separate window.

Additionally, sound files can be quite large and slow to download unless you use a specific compression format that optimizes the file for the Web. Compare, for example, an audio track (Acoustic Alchemy) created by Jason Leroy Finnern (SonicMint.com), found in the Chapter 41 CD files in the sound folder. The track is a folk style guitar loop with one file in the WAV format and the other, MP3. The WAV file is 1.37MB (1,442,988 bytes), far too large to expect the average Web visitor to download. By the time the file is completely downloaded, the user would have moved on to a different page. But the same loop in the MP3 format is surprisingly small — only 128KB (131,690 bytes) — and can be used quite easily as a background sound because the MP3 format streams. Streaming is when a file can begin to play before all its content is downloaded, a useful feature for Web content because connection speeds can vary so widely across a target audience. Finally, it may be even better to add your sound file to a Flash movie and to insert that into your pages. Flash media is handled exceptionally well by most browsers and the same WAV file inserted into Flash MX, then exported as an SWF file that compresses the sound using MP3 technology results in the file being only 16.6KB (17,027 bytes), small enough to be easily downloaded, even by site visitors with slow dialup connections.

Linking to an audio file

Linking to an audio file is the easiest way to incorporate a sound file into your Web page and has the added benefit of letting the user opt to listen to the sound. To link to an audio file, select a text or button link; then use the Property inspector to locate the file with the link's Browse for File button. It is generally considered good form to let the Web visitors know the file download size so that they may make an informed decision about clicking the link that plays the file.

Sound File Formats

WAV (Waveform Extension) is the default Windows system sound file format. WAV files are supported by most modern browsers but can be quite large, even with a short sound. They do not require a plug-in but are handled by a helper application.

AIF/AIFF (Audio Interchange File Format) is the default Macintosh system sound format. It has good quality and can be played by many browsers. AIFFs also are handled by a helper application and don't require the use of a plug-in. However, the relatively large file size of AIFF sound files limits their use in Web pages.

MID/MIDI (Musical Instrument Digital Interface) is a musical instrument file that is basically a set of instructions to your computer to use specific instruments to create digital music. MIDI files are surprisingly small for their relatively long sounds and do not require the use of a plug-in.

MP3 (Motion Picture Experts Group Audio or MPEG-Audio-Layer 3) is a specially compressed file format that was created specifically for Web use. The sound quality is superb for its super-small file size and MP3 files stream — playback of the sound can begin before the entire sound is downloaded. However, a helper application or plug-in, such as Windows Media Player, QuickTime, or Real Player, must be installed and used to play back the file in the browser.

RA/RAM/RPM (Real Audio) like MP3 files, are highly compressed and result in very small files sizes, but their quality is no where near that of an MP3 file. A helper application or plug-in is required for use in Web pages.

AU/SND (or Sun or Java format) is similar to WAV and AIFF formats, only au compression is more flexible. The au format is used primarily within Java applets and is popular with Sun/Unix platforms.

Embedding an audio file

To use a sound file as a background sound, you need to embed it. The <embed> tag references the audio file and a means of playing it, generally a plug-in or helper application. Commonly used plug-ins or helper applications are Windows Media Player, QuickTime Player, and the RealOne Player.

To embed an audio file, work in Design view and use one of these methods:

Use the insert bar's Media toolset and click the Plug-in object button.
Use the insert bar's Media tools and drag the Plug-in object button to your page.
Choose Insert ® Media ® Plug-in; then navigate to locate your sound file.

Embedding the file includes setting certain properties the browser needs to control the appearance of the controller for the plug-in. For example, Width and Height, Align, Vspace and Hspace, and Border all affect the controller used by the plug-in. The Src field lists the path to the sound file. Add a URL to the Plg Url to set a location where the browser looks for the plug-in if the user does not have it installed. You can also click the Play button to view (listen to) the file in the Dreamweaver document.

Where to download sound-related plug-ins

Here's an exercise to embed a sound loop into your HTML page. Be sure to define a site and copy the Chapter 41 files from the CD into your root folder before attempting the exercise.

Note

PC users take note that when you define a site and copy a file from a CD to the root folder, those files will be locked and read-only. To enable editing of HTML files copied to your site, select the root folder and choose File ® Turn Off Read Only from the File menu at the top of the Site panel.

This exercise uses the audio track "Acoustic Alchemy" created by Jason Leroy Finnern, at SonicMint.com:

Open the page sound/index.htm from the Site panel (window). Click the page.
Choose Insert ® Media ® Plug-in and in the dialog box that opens, navigate to the Sound folder and select AcousticAlchemy.mp3. The path structure should be set to document-relative. Click OK. You should see an icon that looks like a puzzle piece, which represents the embedded object.
With the object still selected, look at your Property inspector. In Figure 41-3, the values you see are modifiable; for example, the 32 × 32 W and H are the default settings for the width and height of the controller. If you want the controller fully visible, increase the settings to something like 144 × 60; then view your page in Internet Explorer and Netscape.

Figure 41-3: The sound file and plug-in properties

Most users like to be able to control the sound for a page, so giving them the controller is suggested, but if you don't want the user to have it, there are methods for hiding the controller. For example, you might try setting the W and H values to zero but be sure to test the page in your target browsers to be sure that they accept zero values.
If the visitor doesn't have a plug-in that can handle the embedded sound, the browser uses the URL you provide in the Plg Url field to download the appropriate plug-in.

Here are the URLs for some of the more popular plug-ins:

Shockwave: www.macromedia.com/software/ shockwaveplayer/index.html

Flash Player: www.macromedia.com/software/flash/

QuickTime Player: www.apple.com/quicktime/

RealPlayer: www.real.com

Beatnik: www.headspace.com/beatnik/

VivoActive Player: www.vivo.com/products/playfree/ vaplayer.html
Set the Border property to zero.
Now save this page and keep it open for the next exercise.

Setting parameters for embedded audio

Parameters are attribute settings passed to the browser. Width and Height are parameters, too, but Dreamweaver MX lets you edit those from the fields in the Property inspector. Other parameters are typed into the dialog box you can access by clicking the Parameters button. For example, to have your background sound file play over and over, you would add the paramether LOOP and set its value to true. Different plug-ins respond to different parameters. For example, the VOLUME=10% parameter is honored by Netscape 4x but not Internet Explorer 6x, because it uses the Windows Media Player to play the sound file.

Following are some commonly used parameters:

AUTOSTART=TRUE — This starts the sound playing as soon as it loads. Most plug-ins have built-in keyboard shortcuts, and those could be explained to the site visitor, if needed, so that the user can still stop/start the sound file.
LOOP=INFINITE or LOOP=TRUE — Add this parameter if you want the sound to repeat continuously as long as the visitor has the Web page open.
HIDDEN=TRUE — When set to true, this hides the control panel for the audio file. It is generally a good idea to give your visitors the control panel so they can control the sounds on your Web page. If you want the control panel to appear onscreen, don't add the hidden attribute. The default setting is false.
VOLUME=n — Use a value between 1 and 100.

Where to Find Sound Files

Like images, movies, and other online files, sound files are intellectual property and if not public domain, are likely to be owned by someone. But many sites online offer great sound files for your personal and even commercial use for free. Some good sites include the following:

FlashKit — www.flashkit.com
http://dmoz.org/Arts/Music/Sound_Files/Samples_and_Loops/
SonicMint — www.sonicmint.com

< Day Day Up >