Web Workshop: Add Sound to Your Website


 

Q: How do I put sound files on a webpage?

Sound on the WebA: First, decide which sound file format you want to use. There are dozens. In fact, the Internet uses more formats to accomplish the same basic feats than any medium we've seen. If we could all use the same file formats, we wouldn't have so much trouble enjoying each other's creations. But each format has its own nuances, techniques, and special purposes.

Remember that copyright laws exist and use of these files may be limited.

Before you put audio files onto your website, consider download time, tonal quality, and your server's capabilities. And make sure you know what the file formats are. We'll cover four of the most common audio formats.

MIDI

Pronounced middy, MIDI is an acronym for musical instrument digital interface, a standard adopted by the electronic music industry for controlling devices, such as synthesizers and sound cards, that emit music. At minimum, a MIDI representation of a sound includes values for the note's pitch, length, and volume. It can also include additional characteristics, such as attack and delay time.

The MIDI standard is supported by most synthesizers, so sounds created on one synthesizer can be played and manipulated on another synthesizer. Computers that have the MIDI interface can record sounds created by a synthesizer and then manipulate the data to produce new sounds. For example, you can change the key of a composition with a single keystroke.

A number of software programs are available for composing and editing music that conforms to the MIDI standard. They offer a variety of functions. When you play a tune on a keyboard connected to a computer, a music program can translate what you play into a written score.

-- ZD Webopedia

WAV

WAV is the format for storing sound in files developed jointly by Microsoft and IBM. Support for WAV files was built into Windows 95, making it the de facto standard for sound on PCs. WAV sound files end with a .wav extension and can be played by nearly all Windows applications that support sound.

Download the Goldwave sound editor to make your own WAVs -- free to try, $40 if you like it.

-- ZD Webopedia

MP3

MP3 is the file extension for MPEG, audio layer 3. Layer 3 is one of three coding schemes for the compression of audio signals. Layer 3 uses perceptual audio coding and psychoacoustic compression to remove all superfluous information (more specifically, the redundant and irrelevant parts of a sound signal, the stuff the human ear doesn't hear anyway). It also adds a MDCT (Modified Discrete Cosine Transform) that implements a filter bank, increasing the frequency resolution 18 times higher than that of layer 2.

-- ZD Webopedia

Visit our MP3 Superguide for everything you need to know about MP3.

RealAudio

RealAudio is the de facto standard for streaming audio data over the World Wide Web. RealAudio was developed by RealNetworks and supports FM-stereo-quality sound. To hear a webpage that includes a RealAudio sound file, you need a RealAudio player or plug-in, a program that is freely available from a number of places. It's included in current versions of Netscape Navigator and Microsoft Internet Explorer.

Streaming is a technique for transferring data so that it can be processed as a steady and continuous stream. Streaming technologies are becoming increasingly important with the growth of the Internet, because most users do not have fast-enough access to download large multimedia files quickly. With streaming, the client browser or plug-in can start displaying the data before the entire file has been transmitted.

For streaming to work, the receiving machine must be able to collect the data and send it as a steady stream to the application that is processing the data and converting it to sound or pictures. This means that if the streaming client receives the data more quickly than required, it needs to save the excess data in a buffer. If the data doesn't come quickly enough, however, the presentation of the data will not be smooth.

There are a number of competing streaming technologies emerging.

-- ZD Webopedia

Download a free copy of RealProducer G2 and start creating streaming audio for your webpage. There is a complete user's guide packed with information on streaming audio, the creaton of sound for the Web, and recording tips.

Become an Audio Pro.

  • Adam's Multimedia Tutorial covers great information about preparing sound files for the Web.
  • Another article to read is Adam's Audio for the Masses. Although it was written in 1996, it still has some useful information.
  • MP3.com can teach you how to play, make, and find MP3s. It claims to have more than 27,000,000 downloads and offer artist spotlights as well as news features.

These sites should give you a good start and send you on your musical way.

Insert Audio Into Your Site

You will need to choose a method for adding sound to your website. You could have the sound be a clickable link, play automatically, or play while your site is loading (with a control panel so your audience can control how the sound plays).

Clickable sound: This is a simple method, though not terribly exciting. Simply add the tags <A HREF="filname"> and </A> around the text you want your visitors to click. The browser will then download the file for them. If you want people to be able to control the playing of the sound, add CONTROLS=TRUE within the anchor tag.

Autoplay: You can use the META tag to have sounds play automatically. A typical tag might look like this: <META HTTP-EQUIV=REFRESH CONTENT="05;URL=filename"> where the REFRESH tells the browser to import the sound, CONTENT tells the browser how many seconds (05) to wait before playing the sound and URL determines the location of the file. META tags are placed at the top of the html document in between the <HEAD> tags.

Embedding: Embedding sound gives you more options. You can choose to load the sound before, during, or after the page loads. You can also control how long the sound plays by determining how many loops it should have. The EMBED tag is supported by newer versions of both Netscape and IE, but you may run across problems with earlier versions.

<EMBED SRC="filename" AUTOSTART=TRUE LOOP=FALSE HEIGHT=64 WIDTH=144 CONTROLS="CONSOLE">

Here, the SRC calls the filename, AUTOSTART=TRUE states that the sound will begin right away, LOOP=FALSE states that the sound will play only once, HEIGHT and WIDTH determine the size of the control panel, and CONSOLE is the type of control. Each of these attributes have different options:

AUTOSTART=true/false
LOOP=true/false/X(number of times to loop)
ALIGN=top/bottom/baseline/left/right/absmiddle

Placing the EMBED tag at the beginning of the document will play the sound at the beginning and the same goes for middle and end.

Background Sound: The BGSOUND tag will play music in the background while people visit your site and only worked with IE5. If you use background music, be kind. Some background music will send your audience screaming-- especially if it is looped indefinitely.

<BGSOUND SRC="filename" LOOP=false>

To ensure that your sound will play on other browsers, you could add the EMBED tag as well and wrap the BGSOUND tag with <NOEMBED>/</NOEMBED> tags.

Believe it or not, there are even more ways to control sounds on your site. Check out Project Cool's Audio Zone for more information on making and editing sound as well as controlling your sound with javascript.

 

 

Home HTML Menu Extra Information HTML Hub