Adding Sound to Your Web Page

September 17, 2001, 11:00 PM —  ITworld — 

This week's lesson is on adding sound to your Website. You just might
be amazed at how easily and quickly you can add simple sound clips to a
Web page. We'll spend a few weeks on this subject. Today we'll learn
how to do a simple, non-streaming sound clip add-in.

By now, everyone's encountered sound on the Internet in one form or
another. Some Websites use very small sound clips to emphasize user
interaction with their pages. Other sites provide functionality that
allows people to download complete songs and albums off the Web very
quickly (for those with a quick internet connection). Still other sites
blast us with a MIDI sound clip as soon as we download the page. Sound
can be used to enhance a Web page in many different ways but it can
also detract from a page and make people want to leave instantly. The
trick to using sound to your advantage is to figure out what people
want to hear and what they'll tolerate. This involves thinking about
your target audience.

Once you've decided who's going to be looking at your site and what you
want them to hear (and what they won't mind hearing), you have to start
thinking about how to offer the sound to them. First, you want to
consider the source of the sound. The safest, least-likely-to-involve-
you-in-a-lawsuit sounds are things you record yourself. For instance,
buy a microphone and make a tape of your cat meowing. This probably
isn't already copyrighted by anyone else. Other options might include
recording a personal greeting or playing a song you wrote. Basically,
just about anything. These sorts of recordings are typically risk-free.

You can also pull sounds off the Internet. Literally thousands of sites
offer royalty-free music and sound-effect clips for use on the Web. You
simply download these files and use them in any way you wish. Of
course, you can also make a sound file out of a favorite song or record
and offer that for downloading. However, you're likely to run into some
rather severe copyright issues. You may remember all the discussion
about Napster - a service that allowed you to search and find songs on
the Web from commercial artists and download those song files free of
charge. Napster got sued since duplicating copyrighted sounds is
considered a crime. Using sounds is very similar to how we use images --
some are copyrighted and some you can use any way you want without
giving credit as to where you got them.

File Types
Once you have your sound, you'll want to convert it into a file type,
or format, that can be widely downloaded and played on as many
computers as possible. There are 4 basic sound file formats that are
used on the Web: AIFF, WAVE, MIDI and MPEG files. We'll cover these in
more detail next week, but for this week you just need to be able to
identify them. Typically, most people can download and access these
file formats.

Both Windows and Mac operating systems include simple sound editing
software that will save recorded audio in a variety of formats. You're
likely to come across one or more of these formats when saving your
sound. Of course, files downloaded off the Web are likely to be in one
of these formats already. In that case little or no conversion is
necessary.

Adding a WAVE File to Your Page
Once you have a file that you want to play on your Web page, setting it
up is relatively easy. First, upload the clip to your server, just as
if you had a photo or graphic to display on your page. You can also
experiment by leaving it in the same folder as your HTML document. This
way you can test out your page without uploading it to make sure
everything works.

The coding involved here is simple. Let's say your file is the sound of
your cat meowing. You've named your file "meow.wav". The coding would
look like this:

Hear my cat talk!

It's as simple as that. When the user clicks on the link, the song will
play (sometimes a small control panel will open up for the sound). If
you want the song or clip to play automatically when your page is
downloaded, then you can add a META tag (remember those?) to the HEAD
of your HTML document that tells the browser to play the sound. The
META tag coding is as follows:

This would result in your sound clip beginning to play five seconds
after the page is loaded.

Go ahead and give this a shot. You may find that you can cause some
neat things to happen. For instance, you could make a bell sound every
time someone clicked a link on your page. Of course this could be
extremely annoying to people using the page. Another thing to consider.

Have as good a week as possible and I'll see you back here next time!

» posted by ITworld staff

ITworld

I like it!
Post a comment
The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
Free books

Essential JavaFX
Get started building rich Web apps quickly with an introduction to the power of JavaFX key features -- scene node graphs, nodes as components, the coordinate system, layout options, colors and gradients, custom classes with inheritance, animation, binding, and event handlers.Enter now!

The Nomadic Developer
Consulting can be hugely rewarding, but it's easy to fail if you are unprepared. To succeed, you need a mentor who knows the lay of the land. Aaron Erickson is your mentor, and this is your guidebook. Enter now!

Featured Sponsor

AISO founders envisioned a Web hosting company that was environmentally friendly. While the company employed energy-efficient innovations like solar panels, its infrastructure produced unacceptable power and cooling requirements. Find out how AISO leveraged AMD technology to overcome their challenge in this case study white paper.

In this whitepaper, Scalar explores the opportunity to change the landscape with respect to mission critical databases built around Oracle. Leveraging technologies such as Linux, high-end commodity processing power and Oracle RAC technology to architect, design, build and maintain database infrastructure that delivers maximum availability, reliability and performance at a fraction of traditional cost.

On a typical day, weather.com, the Web site for The Weather Channel in Atlanta, serves up between 15 million and 20 million page views. But in September 2004, when back-to-back hurricanes ransacked Florida, the peak traffic on one day more than tripled: over 70 million page views by more than 7 million unique visitors. Read the full success story now.

Marketplace