IN THIS CHAPTER
Digital audio fundamentals
Music files overview
MP3 mini-primer
Linking and embedding sound
Streaming audio
Incorporating podcasts
Web sites tend to be divided into two categories: those totally without sound, and those that use a lot of it — there's not much middle ground. Many music and entertainment sites rely heavily on both streaming audio and downloadable audio files, such as MP3.
In this chapter, you learn how to use audio in the Web pages you design with Dreamweaver. You look at traditional digital audio formats such as AIFF and WAV, and how you can turn these into files suitable for publishing on the Web, in formats such as MP3 and RealAudio. You also examine music formats, such as standard MIDI files and QuickTime Music. Finally, you learn how to link to an individual podcast as well as a podcast feed.
Lest you forget that you're dreamweaving here, you also look at some Dreamweaver extensions you can use to get audio-enabled sites up and running in no time. But before you leap into those deep waters, it's a good idea to get an overview of digital audio and its place on the Web.
Essentially, there are three ways you can work with sound on the Web: you can link to an audio file, embed a plugin, or insert an audio-based SWF file. Here's the quick approach to all three methods, starting with linking to a sound file:
Select the text or image you want to use as a link.
From the Property inspector, click the Browse for File icon to locate the audio format file.
To embed a plugin for WAV or MP3 files, follow these steps:
Put your cursor where you want the plugin to appear.
From the Common category of the Insert panel, click Media: Plugin.
When the Select File dialog box opens, choose your audio source file.
Resize the plugin placeholder to match the dimensions of the plugin's player controls.
To insert an SWF file, follow these steps:
Put your cursor where you want the plugin to appear.
From the Common category of the Insert panel, click Media: SWF.
When the Select File dialog box opens, choose your SWF file.
There's a lot more to know about working with sound with Dreamweaver — all detailed in this chapter — but that should get you started.
The simplest way to add sound to a Web page is to create a link to an audio file by specifying the file path in the Link text box of the Text or Image Property inspector. When the user clicks that link, the sound file downloads, and whatever program has been designated to handle that type of file opens in a separate window. The link can be text or, as shown in Figure 27-1, an image. An exception to this is the QuickTime Plugin. Instead of opening linked audio files in the QuickTime Player, it opens them within the browser window as if they were a new Web page. To get back to your Web page, the user clicks the browser's Back button.
Figure 27-1. When the HotFlash logo link is clicked, the browser downloads the sample hotflash.mp3 file, which then opens the associated player and plays it.
To create a link to an audio file in Dreamweaver, follow these steps:
Select the text or image that you want to serve as the link to the audio file.
In the Property inspector, enter the name of the audio file in the Link text box, or click the Folder icon to browse for the file. To link to a dynamic source, choose Select File Name from Data Sources and select an appropriate field from the available recordset(s).
Because audio files can be large, it's good practice to note the file size in the Status Bar or to enter it as part of the information in the Alt text box for your image.
When you use the link technique for incorporating sound, you have no control over the position or appearance of the player. However, you can control these factors and more by embedding your audio.
Embedding a sound file truly integrates the audio into your Web page. Embedding the sound file also gives you a much greater degree of control over the presentation of the audio player itself, including the following:
The clip's play volume
Which part, if any, of the player's controls is visible
The starting and ending points of the music clip
As with any other embedded object, you can present the visual display inline with other text elements — aligned to the top, middle, or bottom of the text, or blocked left or right to enable text to flow around it. Dreamweaver controls all these parameters through two different objects: the Plugin object and the ActiveX object. Each type of object calls a specific type of player. With the Plugin object, you get whatever is currently set in the user's system to handle the type of music file you've referenced: you might get the QuickTime Player in one instance and Winamp in another. Calling the Windows Media Player as an ActiveX object explicitly enables you to modify a great number of parameters for Internet Explorer. You learn about all your embedding options, including techniques for cross-browser audio, in the next few sections.
Warning
The <embed> tag used by the Plugin object is not included in the HTML 4.x specifications and will not validate. If validation is important to you, use an <object> tag or Flash method described later in this section.
As with video, Dreamweaver uses the generic Plugin object to embed audio in your Web page. The object requires only three parameters: the source of the audio file and the width and height of the object. To embed an audio file in your Web page, follow these steps in Dreamweaver:
Position the cursor where you want the control panel for the audio file to appear.
Insert the Plugin object by choosing Insert
In the Select File dialog box that appears, choose your audio file.
Use either of these two techniques to size the Plugin placeholder:
Click the resizing handles on the Plugin placeholder and drag it out to a new size.
Enter the desired values in the W (Width) and the H (Height) text boxes of the Property inspector.
You'll need to do a bit of testing to find the ideal measurement values. Many systems, including mine, default to the QuickTime plugin for playing WAV or MP3 files. For this plugin, you can start with a width of 100 pixels and a height of 18 pixels, as shown in Figure 27-2; a wider width displays more audio controls. For systems that use Windows Media Player, you'll need a width of approximately 144 pixels and height of 50 to display all controls. You may need to adjust the width and/or height after further testing.
When the Plugin object is inserted, Dreamweaver displays the generic Plugin placeholder.
Background music, played while the user is viewing online material, is one of the Web's hidden treasures. When used tastefully, background music can enhance the overall impact of the page. Conversely, when abused, it can drive users away in droves.
An embedded player is best inserted using Dreamweaver's ActiveX object — the embedded player consists of two ActiveX objects, one for the player control (or controls) and one for the audio file itself. The separation of content and player makes it easy to link the content to a data source while maintaining the same control panel.
Making a regular embedded sound into a background sound is as simple as adding a few parameters to the <embed> tag: hidden tells the browser not to display any controls, autostart tells it to start playback automatically, and loop tells it to play the audio continuously. Although you can add these attributes to the <embed> tag manually in the HTML Code window, it's easier to add them using the Property inspector. Follow these steps to embed background music in a Web page:
Position the cursor near the top of your Web page. Choose Insert
Choose your audio file in the Select File dialog box.
Dreamweaver inserts a 32 × 32 pixel placeholder to indicate where the Plugin code is located. You can resize the placeholder so your layout won't be affected.
In the Property inspector, enter 2 in both the H (Height) and W (Width) text boxes.
Note
Entering a width and height attribute is necessary for compatibility with older browsers.
If your Property inspector is not already expanded, expand it now (by clicking the arrow icon in the lower-right corner of the inspector). Click the Parameters button to open the Parameters dialog box.
In the Parameters dialog box, click the Add (+) button and enter hidden in the Parameter column. Click in the Parameter column and type in the first parameter. Use Tab to move to the Value column and enter true, as shown in Figure 27-3. Use Tab again to move to the next parameter.
The following list of tips can help you navigate and use this dialog box:
Use Shift+Tab if you need to move backward through the list.
To delete a parameter/value pair, highlight it and click the Delete (−) button at the top of the Parameter column.
To add a new parameter, click the Add (+) button to move to the first blank line, and use Tab to move to the next parameter.
To move a parameter from one position in the list to another, highlight it and click the up or down arrow buttons at the top of the Parameter column.
Enter autostart as the next parameter, and give it the value true.
To make the audio clip repeat, enter loop as the next parameter; and in the Value column, enter the number of times you want the sound to repeat. To make the audio repeat indefinitely, enter true as the value.
Click OK to finish.
You can exercise a much finer degree of control over the audio in your pages by calling specific plugins. The tradeoff, unfortunately, is that by designating a plugin, you reduce the size of your potential audience. Some plugins are specific to a browser or browser version. Moreover, plugins that aren't distributed with the major browsers face an uphill battle in terms of market penetration. If you use a plugin, you can always expect some users to be resistant to downloading the necessary software. Before you incorporate any plugin, you must weigh these issues against your overall design plan.
The Windows Media Player is Internet Explorer's default multimedia player. You can use it to play the standard audio formats, including MP3, WAV, AIFF, AU, and MIDI files. Calling Windows Media Player directly as an ActiveX control, however, gives you far more flexibility over the player's appearance and functionality: you can also control its width, height, control panel display, loudness, number of loops, and so on.
To incorporate the Windows Media Player ActiveX control, follow these steps:
Position the cursor where you would like the Windows Media Player control panel to appear. Choose Insert
In the ClassID text box, enter the ID for the Windows Media Player control: CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6.
Tip
If you've entered this long Windows Media Player class ID previously, you can click the arrow button and choose the ID from the drop-down list.
Change the width and height values in the W and H text boxes to match the desired control display. The Windows Media Player display resizes to match your dimensions as closely as possible.
Click the Parameters button.
Click the Add (+) button and enter the first parameter: FileName. Use Tab to move to the Value column.
Enter the path and filename for your audio file. Unfortunately, there is no Browse button in the Parameters dialog box, so you must enter the pathname by hand. If the audio file resides in your site, be sure to specify a relative URL rather than an absolute one.
Continue entering the desired parameters and values for your audio file, as shown in Figure 27-4.
Click OK when you're finished.
The Windows Media Player ActiveX control has many parameters to choose from — 34, to be exact. Explaining all these parameters is beyond the scope of this book, but Table 27-1 describes the key parameters.
Note
As with plugins, all the parameters and/or values of an ActiveX control may be linked to a dynamic source. From the Parameters dialog box, click the lightning-bolt icon in either the Parameter or Value column to expose the available recordset fields.
Warning
Windows Media Player's default volume setting is 0, but this is the highest setting, not the lowest setting. Specifying a higher number for the volume parameter lowers the volume of the sound.
Table 27-1. Windows Media Player Parameters
WMP Parameter | Possible Values | Description |
|---|---|---|
|
| Determines if the sound begins playing when the download is complete. |
| Any valid sound-file URL | Specifies the sound file to be played. |
| Any integer | Sets the number of times the file should repeat. If the value is |
| Number of seconds | Determines the beginning point for the audio clip, relative to the start of the file. |
| Number of seconds | Determines the ending point for the audio clip, relative to the start of the file. |
|
| Shows the control panel if set to |
|
| Shows the display panel if set to |
| Any integer, from | Sets the loudness of the audio. |
All ActiveX controls are included in HTML's <object>...</object> tag pair. Dreamweaver codes this for you when you insert any ActiveX control. Netscape doesn't recognize the <object> tag, and Internet Explorer doesn't recognize the <embed> tag when it's within an <object> tag, so it's possible to target both browsers with one <object> and <embed> pair.
After you've entered the FileName parameter and value for the Windows Media Player ActiveX control, select the Embed checkbox in the Property inspector. The same name that you specified as the FileName now appears in the Embed text box. Dreamweaver takes advantage of the fact that Netscape doesn't recognize the <object> tag by inserting the <embed> tag inside the <object>...</object> tag pair. The resulting HTML looks like the following:
<object classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" width="193" height="270"> <param name="FileName" value="sounds/Fantasy.mid"> <param name="PlayCount" value="0"> <param name="ShowDisplay" value="true"> <embed src="sounds/Fantasy.mid" width="193" height="270" filename="sounds/Fantasy.mid" playcount="0" showdisplay="true"> </embed> </object>
Note that Dreamweaver picks up the attributes and parameters from the ActiveX control to use in the <embed> tag. You often have to adjust these, especially the width and height values, which differ markedly for Internet Explorer and Netscape audio player displays.
A podcast is, in essence, a digital multimedia file, suitable for playback on computers or portable media devices, such as the Apple iPod. Although there are an increasing number of video podcasts, audio podcasts make up the great majority of available content. A podcast is, like many other audio files, often stored in an MP3 format. What makes a podcast different is that the content is typically syndicated via XML files called feeds. The syndication makes it possible for someone to subscribe to a particular podcast feed and automatically receive the latest audio program.
One reason podcasts are popular is that they are easy to create. Anyone with a relatively recent computer, a microphone (even built into a laptop), and audio recording software can create one. Once the audio recording has been saved as an MP3 file, it's a good idea to add identifying tags called ID3 tags. ID3 tags are like <meta> tags and typically contain details about the podcast, such as the title, the name of the creator, and, where pertinent, keywords that describe the content. When the file is played, the MP3 player extracts the ID3 tags and displays the info.
Tip
One popular program for adding ID3 tags to an MP3 file is Apple's iTunes, available for free on both Macintosh and Windows platforms. To assign ID3 tags, select a file imported in the iTunes Library. Choose File
Most syndicated podcasts rely on a special form of an XML file format known as RSS. There's a bit of dispute over what RSS actually stands for — Really Simple Syndication, Rich Site Summary, or RDF Site Summary are among the contenders — but, bottom line, they all mean the same thing: a consistent format for publishing content.
Note
If you're completely new to XML and want to know more, check out Chapter 32, "Integrating with XML and XSLT," before continuing.
The key containing elements of an RSS feed are the opening XML indicator, an <rss> tag, and a <channel> tag, like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<rss version="2.0">
<channel>
</channel>
</rss>Within the <channel> tag, you'll find a series of meta-like tags including the title, description, language, and copyright details as well as a link to the HTML page that hosts the main content:
<channel> <title>My Podcasts</title> <link>http://www.idest.com/</link> <description>The latest Dreamweaver news</description> <language>en-us</language> <copyright>Copyright 2009 idest</copyright> </channel>
Following these tags, but still within the <channel> tags are the individual <item> tags that describe and provide links to each podcast. A typical <item> might look like this:
<item>
<title>New York, New York</title>
<link>http://www.idest.com/pod/091507.htm</link>
<description>
How to add podcasts to your Web pages.
</description>
<enclosure url="http://www.idest.com/media/pd01.mp3"
length="640561" type="audio/mpeg"/>
</item>Within each <item> tag, the <enclosure> tag links to the actual MP3 podcast file. You'll note that the <enclosure> tag is referred to as an empty tag because, like <img>, it does not have both opening and ending tag pairs — it's just a single tag. You can have as many <item> tags in your channel as you'd like, each representing a single podcast.
A completed RSS feed XML file might look like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<rss version="2.0">
<channel>
<title>My Podcasts</title>
<link>http://www.idest.com/</link>
<description>The latest Dreamweaver news</description>
<language>en-us</language>
<copyright>Copyright 2009 idest</copyright>
<item>
<title>New York, New York</title>
<link>http://www.idest.com/pod/091507.htm</link>
<description>How to add podcasts to your Web
pages.</description>
<enclosure url=" http://www.idest.com/media/pd01.mp3"
length="640561" type="audio/mpeg"/>
</item>
</channel>
</rss>It's up to the Web designer whether a separate link to an individual podcast is provided along with the link to the podcast RSS feed. As noted earlier, linking to an MP3 file is just like linking to any other file: Simply select the text or graphic and, in the Property inspector, enter the path to the MP3 file.
RSS feeds are linked in a similar manner, but the link goes to an XML file rather than an MP3 file. To help identify RSS feeds, a common symbol has been widely adopted. The orange and white feed icon (see Figure 27-5) has been approved for use by both the Mozilla and Microsoft browser teams and you can find it at http://feedicons.com in a variety of formats.
Adding sound to a Web page brings it into the realm of multimedia. Dreamweaver gives you numerous methods to handle the various audio formats, both static and streaming. When you use custom Dreamweaver objects and actions, enhancing your Web site with audio is a snap. When adding audio to your Web pages, keep these points in mind:
The common downloadable audio file formats are MP3, AIFF, WAV, AU, and RMF.
The common downloadable music file formats are MP3, MIDI, QuickTime Music, and RMF.
You can either link to a sound or embed it in your Web page. With standard audio, the linking technique calls an independent, free-floating player; the embedding technique incorporates the player into the design of the page. Hiding the player creates background music or sound.
Third-party plugins offer far greater control over the appearance and functionality of the sound than relying on a browser's default plugin; to use a third-party plugin, however, your user must download it.
Designers can link to individual podcasts, which are typically in MP3 format, as well as a podcast feed, which is stored as an XML file.
In the next chapter, you learn how to use Dreamweaver templates to enhance your Web page creation skills.