Sound is more complex than images in to work with in
web
browsers. There are several approaches:
A link can lead to a sound
Sound can be embedded to play automatically when a page loads
(options
can set whether it loops or not)
Sound can be embedded with a visible controller so the user can
start,stop,change
volume, etc.
Customized controls can be built using Javascript and DHTML
Complexities of use: Sound tags are
not
yet standardized. Netscape and Intertnet Explorer use different
commands
to embed sound. Different generations of browsers use different
methods.
Sound can come in many formats including streaming and non
streaming.
Some formats don't work on some operating systems - eg aiff won't work
on Windows systems. The user must have an appropriate plug in and
the helper application MIME settings (in the preferences) must be
properly
set for each sound format. For Netscape you might use quicktime,
liveaudio, realaudio, or Crescendo as plug ins. Controllers
and Javacript are very specific to the plug-in used. Still the
effort
is worth it since sound can greatly enhance a web site.
Formats: There are many different sound formats -
varying
by the kind of sound they encode (eg digitized sound vs music data);
their
method of compression (quality vs file size); operating systems they
favor;
etc. A full discussion of formats is not appropriate here except to
list
what you might run into - digitized: wav, aiff, mp3,
mu-law
(au), quicktime (mov) realaudio (ram) , microsoft media player (avi),
shockwave
(swa) and music data: midii (mid)
Sound creation or locating: Also, you must get your
sound
- either creating it by music synthesizer or composition programs,
digitizing
it in sound editing programs, or finding links to sounds. You
must
create it in as high of quality as possible. You must compress it
to make as small files as possible so it can travel easily to users
with
limited bandwidth. Also, all the centuries of sound aesthetics
offer
lessons about how to think about the sound you use.
Linking to Sounds
The simplist approach is creating a standard url link to a sound.
If the browser has an appropriate plug-in and MIME setting, it will
load
the sound and play it. For example, this link should play a short
midi sound file. If it doesn't, check your plug-ins and MIME
settings.
(In our test system, it uses Quicktime to play the sound; your
system's
response depends on how your MIME settings are arranged.)
Here is the code to make this link. (The target = "new" option
in the tag opens the sound in a new browser window. It isn't
absolutely
necessary but it has the advantage of keeping the original page
displayed.
See discussion of frames in this how-to pages for details of opening
new
browser windows.)
<a
href="http://userwww.sfsu.edu/~infoarts/technical/howto/sound/jesu-joy.mid"
target = "new" >Link
to "jesu-joy.mid**" file on infoarts server </a>
Embedding Sound in Web Pages
Many web authors prefer to embed the sound in the page so it loads
automatically
and does not require a url link. Options allow you to have the
sound
start playing automatically in the background when it loads or to come
in with a controller. You can also set whether the sound plays
once
or repeatedly loops. Note that an endlessly repeating sound can
quickly
alienate web visitors.
Unfortunately, Different browsers used different tags to
embed sound. For a while Netscape used EMBED and IE used
BGSOUND..
Luckily there is a work-around in which you can include both tags so
the
sound will play in either browser. The EMBED or BGSOUND tag along
with a SRC option pointing to the sound file is the basic
requirement.
In addition you must provide some way for the sound to start playing.
This
example uses the AUTOSTART set to TRUE. This use of sound is much
like the inline images called by the IMG tag.
(** Note there is an evolving standard that promotes use of the
OBJECT tag. HTML 4.0 specification
does not include the EMBED or BGSOUND tags. See the section
at the end for a bit more detail.
If examples on the page don't work, your browser may require the OBJECT
tag. It would be safest at this point to use the OBJECT tag with
the extra code to cover old browsers.
Automatic background sound via EMBED and BGSOUND (see below
for OBJECT specifications)
Here is an example of cross-browser code to automatically play a sound
when a page loads. It uses the EMBED tag on the outside. It
includes
the NOEMBED tag within. This tag only activates when the EMBED
does
not do the job. In a Windows situation, the BGSOUND should take
over.
play sound - no looping
<body>
<embed src="file.wav" autostart="true" hidden="true" >
<noembed>
<bgsound src="file.wav" loop="0">
</noembed>
</embed>
.............. (other parts of the page)
.............
</body>
Url: The syntax requires you to indicate an SRC pathway to
get
the
sound.
Autostart: tells whether the sound should automatically
start on
loading.
Looping: Optionally a LOOP characteristic to specify number
of
times
to play. In the first example, the tag would retrieve a sound
called
test.wav (from the same directory as the original page) and would play
it 1 time. No looping is the default setting and the looping command
could
be dropped. In the second example the options loop = "true"
(Netscape)
or -1 (Explorer) causes enless looping. Remember it quickly becomes an
annoyance.
Hidden: option tells the browser whether it should show a sound
controller.
Each operating system requires sound to be in sound formats it
understands.
Wav and mid are good bets. You would place this sequence of
commands
inside the BODY tag.
Some Web authors are using Quicktime sound-only movies as a way to
author
cross platform sound. Quicktime allows more sophisticated control
panels
and javascript. See the Infoarts Quicktime
tutorial in this web how-to-series
Automatic background sound via OBJECT with EMBED and BGSOUND
included
Here is an example of code that uses all of the methods including
OBJECT
to embed sounds. It loads a quicktime file. The classid is
required to identify the quicktime plug in. A viewer might
need to download the quicktime plug-in since microsoft
quit
including it automatically with the IE browser. Other ids would
be
needed for different plug-ins. You could set other parameters in the
object tag such as autostart or cotnroller visibility.
You can also create an option to place a sound control panel on the
page
that will allow the user to start and stop the sound. The sound control
panel typically includes a play, pause, and stop button as well as a
volume
setting lever. Unfortunately the commands to display a controller
are very specific to the operating system, browser, plug-in, and MIME
settings
that the visitor has installed. Also the control panels may look
different. You cannot count on your page appearing just as you designed
it. SRC url should point to the absolute or relative address of
your
sound. Our examples were created with quicktime as the plug-in.
You should treat the panels as visual elements using html markup,
styles,
and tables to arrange them on the page.