Audio on the Web

Audio on the web isn't a new phenomenon. In fact, record labels, bands, and web sites such as Napster, Purevolume.com, Real's Rhapsody (formally Listen.com), iTunes, eMusic, and others offer direct downloads and streaming audio directly from their websites at a fraction of the cost of buying the CD from a music storeand have been doing it for a few years now. With the number of mobile music devices on the market, it's obvious that Internet-based audio, including the distribution of music online, is the most exciting and potentially earth-shaking aspect of the Internet audio scene.

In an effort to keep up with latest trends, you might be thinking that it's time to begin adding audio to your website. Whether you want to add faint ambient background music or direct downloads of your band's work, adding audio to your web pages in Dreamweaver is simple. The rest of this chapter deals with adding audio to your websites using Dreamweaver. As you'll see, working with audio is similar, if not closely related to, working with video; adding these types of media to your websites is no more complicated than including images and text.

Audio File Formats

Many different audio formats are in use today, spanning various platforms and operating systems. Table 18.4 outlines the most common audio formats on the web. You might already be familiar with some of these.

Table 18.4. Audio File Formats Common on the Web

Audio Format	Extension	Description
AIFF	.aiff	Developed by Apple, the Audio Interchange File Format can be played in most browsers. However, refrain from using this format in your web pages because the file size is usually high.
Flash	.swf	Although you might think that Flash's only purpose is to create slick animated movies, think again. Because most browsers support the Flash plug-in, think about exporting your audio files as PCM- or MP3-compressed Shockwave Flash movies.
MIDI	.mid	Developed in the 1980s by electronic musical instrument manufacturers, the MIDI audio file is an extremely small synthesized audio format. MIDI files were the most common audio format in the 1990s because of their small file size. If you want to hear what your favorite musician sounds like on a keyboard, convert the MP3 to a MIDI file and listen. Due to bandwidth increases, the MP3 file format has become more popular and is taking over as the de facto standard.
MP3	.mp3	The most widely known audio format on the web today is the MPEG Audio Layer 3 or MP3 file format, and for good reason. MP3 files are high-quality (sometimes CD quality) files that offer excellent compression. MP3 files are also widely supported by nearly every audio and video player including RealPlayer, QuickTime player, Windows Media player, WinAmp, and iTunes.
QuickTime	.mov	A QuickTime movie with audio only.
RealAudio	.ra	RealAudio is the audio component of RealMedia. This format is also widely adopted by a variety of players on the market today and offers good-quality audio at low bit rates. However the quality is still not as good as MP3.
WAV	.wav	Co-developed by Microsoft and IBM, WAV files are the default audio format for Windows operating systems. Like AIFF on MAC, WAV files can be played in most browsers, but you should avoid using them on your web pages because of their rather large file size.
Windows Media	.asx, .wma	When working with Microsoft's Windows Media Streaming Server, these audio files are generally available.

As you can see, numerous options are at your fingertips. Depending on your project, you might not have to look any further than MP3. MP3 files are quality, highly compressed audio files that can play in nearly all audio players and in nearly all browsers. For the following examples, we'll use the MP3 format because it's the most universal.

Linking to Audio Files

Linking to audio files in your site can be accomplished just as easily as linking video clips. Simply add a link to your web page and point the link source to the MP3 file. When the user clicks the link on the page, the browser loads the appropriate media player and attempts to play the clip. To add a link to your web page that plays an MP3 audio file, follow these steps:

1.	Open the linkingaudio.htm page included with the downloaded files for this chapter. Notice the bullet point for linking the audio file.
2.	Highlight the bullet point and drag the point-to-file icon into the spitalfield.mp3 file located in the Media.
3.	Save your work.

Preview the page in the browser by selecting the Preview in Browser option from the Document bar (or by pressing F12). When the page loads in the browser, click the link. As you can see from Figure 18.12, the browser prompts you with a dialog asking whether you want to save the file to disk to play later (direct download) or if you want to open the file directly from the server and play it within the appropriate audio player (progressive download).

Figure 18.12. The browser prompts you with a dialog asking you to either save the file to disk or open it directly in the appropriate audio player.

Embedding Audio Files

The upside to linking audio files in the browser is that it gives the user a chance to play the audio file when they want to. If you're a musician, linking your audio files to your web pages gives you the opportunity to allow your fans to download your music directly from your website. Of course, the downside to linking audio files from your web pages is also the fact that your fans can download your music directly from your website. Suppose that you don't want users to freely download and distribute your audio files? You can do one of two things: First, you can sample a small portion of the entire clip and post that on your Web page. Second, you can embed the clip into the web page. When you embed the clip, you can provide users with the ability to stop, play, set the volume, and use a slider to pan to a specific portion of the audio clip. The obvious benefit is that users can listen to the entire clip but cannot save the clip to disk.

CAUTION

When embedding audio clips into your web pages, it's crucial that you take your user's sensitive ears into consideration. Unsuspecting users who might have accidentally turned the volume up on their speakers could easily browse to your page and be immediately startled when the audio starts.

To embed audio in a Web page, follow these steps:

1.	Open the embeddingaudio.htm page.
2.	Place your cursor just under the paragraph of text and choose Insert, Media, Plug-in.
3.	Browse to the spitalfield.mp3 file located in the Media folder and click OK. A new plug-in icon appears on the page.
4.	Depending on the audio player you are targeting, the plug-in icon's size changes accordingly. For Windows Media player, a good size is 320 pixels wide by 45 pixels high. Change the values for the W and H settings in the Properties Inspector so that it resembles Figure 18.13. Figure 18.13. Resize the plug-in icon to coincide with the default Windows Media player size.
5.	Save your work.

Preview the page in the browser by selecting the Preview in Browser option from the Document bar (or by pressing F12). When the page loads in the browser, the audio clip begins playing in an instance of Windows Media player directly within the browser (see Figure 18.14).

Figure 18.14. The audio clip begins playing in an instance of Windows Media player directly in the browser.

NOTE

The MP3 file began playing in Windows Media Player because that's my operating systems default media player. Results vary depending on which player is configured to run for a specific file type.

In this example, we used Windows Media player to play our MP3 clip. Depending on the file type of the audio clip, the appropriate player is automatically chosen by the browser.

In some rare cases, visitors to your website might not have an audio player installed to handle playing audio files directly in the browser. If this is the case, the user can simply click the plug-in icon. The browser redirects the user to the appropriate page for downloading plug-ins required to play audio files within the browser.

Playing Background Music

When used tastefully, faint ambient background music can be an added plus to your website. As mentioned in the previous section, however, if you use music inappropriately (adding blaring music that starts without notice), your users will wish they never visited your site.

To add background music to your web page, follow these steps:

1.	Open the backgroundmusic.htm file.
2.	Place your cursor just under the paragraph of text and choose Insert, Media, Plug-in.
3.	Browse to the ambient.mp3 file located in the Media folder and click OK. A new plug-in icon appears on the page. Keep the plug-in icon's default size (its size won't matter in this case).
4.	Select the plug-in icon and click the Parameters button in the Properties Inspector. The Parameters dialog appears.
5.	Add the hidden, autostart, and loop parameters and set all their values to TRue.
6.	Click OK to close the Parameters dialog box.
7.	Save your work.

Preview the page in the browser by selecting the Preview in Browser option from the Document bar (or by pressing F12). When the page loads in the browser, the audio clip begins playing faintly in the background. Notice that the default audio player is hidden from view and that the clip loops to the beginning after it reaches the end.