ADD AUDIO TO YOUR WEB SITE

As you browse the Web, sometimes you come across a site that begins making noise as soon as you load the page (of course, you need to have your speakers plugged in and the sound turned on). Sometimes, you have to click a hyperlink to start the sound playing. That sound -- a person talking, sound effects, or music -- is contained in an audio file.

How do you add sound to a Web page? You add an audio file the almost the same way as you add an image file. Both image and audio files must be linked to a Web page and activated with HTML. The only difference is that instead of displaying a picture, an audio file plays a sound. Just as there are Web-friendly formats for image files (such as GIF and JPEG), there are also Web-friendly formats for different types of sound files. You find out about these throughout this lesson.

There are two ways to approach using audio on your site:

  • Send information about the music (the notes, volumes, instruments, etc.) and let the receiving computer's sound card play it.
  • Send the actual music as recorded audio.

The difference between the two ways of using sound boils down to what you want the sound to accomplish on the Web page. There are advantages and disadvantages to both types of Web audio. In the next sections, you'll learn about how to use both types, as well as the reasons for using one over the other.

Recorded Audio on the Web

High-quality audio files can be very large. The WAV format, which is used to store audio on Windows computers, takes up about 10 MB of space for every minute of CD-quality, stereo sound. A typical 4-minute song, then, takes up 40 MB and would take about 90 minutes to download using a 56 Kbps modem. No one, not even the drummer's girlfriend, is going to wait that long to hear a band's demo song. So, what can you do?

Shrink It

There are several ways to reduce the size of digital audio files:

  • Use compression: Compression is an extremely effective way to dramatically reduce multimedia file sizes while retaining quality. Compression uses what's called a codec to strategically remove information from the file that's least likely to be noticed during playback. MP3 is a codec.

By converting a 4-minute WAV file to an MP3 file, you can reduce the file size by a factor of 10, with no noticeable change in the quality.

  • Reduce the sampling rate: A simplified way of looking at sampling rate is as a measurement of the quality of the audio. CD-quality sound has a sampling rate of 44 Khz (kilohertz). Phonograph-quality sound is 22 Khz. Telephone-quality sound is 11 Khz. A reduction in the sampling rate from 44 Khz to 22 Khz reduces the file size by half.
  • Convert it to mono: By converting your stereo audio file to mono, you chop the file size in half. If you're planning to post a tape of yourself singing in the shower to your site, it'll probably sound just as brilliant in mono as in stereo. This isn't the best solution to your band's problem, however. In addition to making you sound worse, it still leaves you with a 20 MB file and a 45-minute download.

By combining these different methods for reducing audio file size, you can easily shrink your 40 MB audio file under 4 MB. Suddenly, the download time isn't all that bad. But, what do you do if you want to post an entire concert, lecture, or any other lengthy audio file to your site? This is where a technology called streaming comes in.

Stream It

Steaming means that when a visitor clicks a link to an audio file, the file isn't downloaded all at once and then played, as is the case with a WAV or MP3 file. Instead of downloading the full sound file, site visitors who click a link to stream content are able to listen to or view the file as it's downloading. This creates the appearance of the download time being faster, even if it actually isn't. Pretty clever, huh?

Streaming audio or video from the Web can be somewhat more involved than simply providing files for download. Streaming requires you to have access to a streaming server or software to prepare your audio or video files for streaming (called an encoder ). When you upload files to a streaming server, such as the one made by RealNetworks, it manages the process of sending it to users.

The actual process of using a streaming server is beyond the scope of this course; however, you can learn about creating and using streaming media from Streamalot . The company includes a number of short tutorials to help you set up specific types of streaming media.

The Ultimate in Small Audio File Sizes

Say you're creating a Web site for your wedding. When people visit the site, you want the wedding march to play. Ignoring the corniness of this proposition, there are significant problems with using recorded audio to accomplish this. The issue that you've already seen is the file size problem. If the music plays every time someone visits the homepage, even a relatively small recorded audio file will quickly become very annoying.

The solution is MIDI (Musical Instrument Digital Interface). MIDI is a standard for encoding information about digital audio. The important thing to remember about MIDI files is that they don't actually contain the music. Instead, they tell computers how to play the music. Think of MIDI as sheet music for computers. If the actual performance isn't important, and you don't need lyrics, MIDI is the way to go.

To find MIDI files, simply search the Web. There are hundreds of sites that give away free MIDI music files.

See the following table to get an idea of how small MIDI files are in comparison to WAV and MP3 files.

Track Title Format File Size
Take Five by The Dave Brubeck Quartet WAV 55 MB (56,320 KB)
MP3 5 MB (5,120 KB)
MIDI 15 KB

Table 5-1: Comparison of WAV, MP3, and MIDI file size.

Using recordings of someone else's works (such as Mr. Brubeck's) on your Web site could possibly be a violation of copyright law. Make sure that you have permission from the copyright holder before making anyone else's material available on your site.

Although MIDI files are small and easy to find freely on the Web, the sound quality of MIDI files leaves a lot to be desired. Unless you absolutely have to have some sort of music load automatically for visitors to your site, it's best to leave MIDI audio off.

Record on Your PC

Microsoft includes a utility called Sound Recorder, shown in Figure 5-1. It's generally found in the Accessories/Entertainment folder on Windows PCs.

Figure 5-1: Microsoft Sound Recorder.

Sound Recorder lets you play and record WAV files. You'll need a microphone to record sounds, and speakers and a sound card to hear them. You can buy an inexpensive microphone at your local computer retailer or electronics store. Be sure the one you buy has the same kind of connector your computer does.

On the Macintosh, the Sound control panel has similar functionality to Sound Recorder.

The Sound Recorder and the Mac's Sound control panel work just as conventional tape recorders. The red button is the record button, the square button is the stop button, and so on. You can tell right away whether you're actually recording by the activity in the display.

After you've finished recording, you might notice that your WAV file includes dead air -- a few seconds at the beginning or end of the recording. Sound Recorder provides a minimal editing capability that lets you cut out parts of your WAV file. There's even some sound effects functionality.

If you're going to do any serious recording or sound editing as part of your Web page development process, you want to use a more robust sound-editing package, and quality recording equipment. Another, more robust, sound editor is Audacity , which is free, and includes a host of editing features that give you a lot of freedom and power to create and edit audio files.

Add Sound to a Web Page

After acquiring or creating sound files, it's time to add a link between your Web page and the sounds you want to play on it. Your Web editor ought to be able to handle this task handily but you'll learn some HTML code in this lesson to help you if you get stuck.

If all you want to do is allow your visitors to listen to a sound file if they choose, you simply link to a sound files the same way you create any hyperlink. For example, to link the sound file happy_birthday.wav to the text Happy Birthday, create this code in your HTML where you want the link:

<a href="happy_birthday.wav">
   Happy Birthday!</a>

That's all there is to it.

Now let's go one step further. Let's set up the page so that a WAV file plays when a visitor loads the page.

<embed src="happy_birthday.wav" 
   width="144" height="60" autostart="true"
   loop="true">

The height and width attributes are for the sound bar that's displayed when the sound starts using the <embed> tag. The autostart attribute is self-evident and the loop attribute indicates to the browser that the sound should be repeated over and over.

It's just that simple. Adding video can be a little more complex though. In the next section, you'll learn the simple way to add video and discover where to go for more information about adding more complex types of video.