Demonstration of How to Use Live Audio.
by Stephen Wilson
| Note these capabilities require Netscape Navigator 3.0.
Microsoft Explorer supports only .wav and .mid formats and requires the
BGSOUND tag instead of EMBED. They also require appropriate
plug ins - for example, the Quicktime plug-in on the Macintosh. |
Basic HTML Tag
Current versions of these browsers support embedded sound. The sound can
be in any of the popular web formats: AU, WAV, AIFF, and MID (midi). New
HTML tags allow you to control the way the sound is played and the appearance
of a sound control panel.
The EMBED 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 - 1. an AUTOSTART opotion set to TRUE. Autostart means
the sound will play as soon as it loads. The default is false or 2. a Control
Panel (described below) or 3. Javascript to start the playing. This example
uses sthe A UTOSTART set to TRUE. This use of sound is much like the inline
images called by the IMG tag.
<EMBED SRC= "jesu-joy.mid" AUTOSTART=TRUE >Microsoft Explorer
uses a different syntax for sound. It allows background sounds to be
installed with the BGSOUND= tag. Optionally, you can specify the number
of times to loop. The syntax requires you to indicate an SRC pathway
to get the sound and optionally a LOOP characteristic to specify number of
times to play. In this example, the tag would retrieve a sound called
test.wav (from the same directory as the original page) and would play it
3 times. IE requires sound to be in .wav format. Some Web authors are using
;Quicktime sound-only movies as a way to author cross platform sound.
<BGSOUND SRC="test.wav" LOOP=3>
Control Panels
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 includes a play, pause, and stopbutton as well as a volume setting
lever. Display of the console is controlled by including the option CONTROLS=CONSOLE
in the EMBED tag. In this example, the autostart option has not been activated
because the user can use the play button to start the music. The WIDTH
and HEIGHT options must be included to display the control panel. (Early
versions of live audio were buggy so that settings larger than the exact
settings produced empty white space on the page and settings smaller than
the right size produced no control panel. ) Most of the examples below
show a control panel. You very well might not want one if you wanted your
sound to have an ambient character. You can indicate whether you want the
control panel hidden by using the option HIDDEN=True.
You can also activate option to show only selected features of the control
panel - namely, CONTROLS=PLAYBUTTON or PAUSEBUTTON or STOPBUTTON or VOLUMELEVER].
Again you must be careful to indicate the size of the graphic correctly.
The example below shows just a play button and sound level indicator.
If you want to load several elements, you must use a workaround to arrange
for each element to be attached to the same sound. You must issue an EMBED
command for each element referring to the same sound. But Navigator will
really reload the sound each time unless you use the "stub" workaround.
More
details on Netscapes "stub" workaround
Start Time and End Time
Live Audio also allows several other options to be set in the EMBED tag.
You could set the starting and ending time to be other than the default
beginning and end. Use the STARTTIME= minutes:seconds and STOPTIME=minutes:seconds
notation. In the example below the sample sound is set to start at the
5 second point and to end at the 10 second point.
|
Looping and Volume
You can also set whether the sound should loop and if so, how many times.
You can set the volume on a scale of 0 to 100. The options for looping
are true,false, or an integer . The example below shows a sound set to
play at 50% volume and to loop for 3 times.
|
Alignment and Naming
LiveAudio allows you to align the control panel in all the ways you could
align images. Options include TOP, BOTTOM, CENTER, BASELINE, LEFT, RIGHT,
TEXTTOP, MIDDLE, ABSMIDDLE, ABSBOTTOM. Also you can name the sound controls
so that they can be accessed by Javascript. The example below would align
the control panel on the right side of the window so all other text and
image would appear to its left. In addition the controls are given the
name "bang".
<EMBED SRC="test2.aiff" ALIGN=right WIDTH=144 HEIGHT=60 CONTROLS=console
NAME="bang">
List of Options Available in EMBED tag
These examples above have isolated various options for the sound EMBED
tag. Note that all these commands can be combined in a single EMBED. The
list below shows the options available for each option.
| AUTOSTART= TRUE or FALSE |
LOOP=TRUE or FALSE or INTEGER |
| STARTTIME=MINUTES:SECONDS |
ENDTIME=MINUTES:SECONDS |
| WIDTH=# PIXELS |
HEIGHT=# PIXELS |
| ALIGN=TOP or BOTTOM or CENTER or BASELINE or LEFT or RIGHT
or TEXTTOP or MIDDLE or ABSMIDDLE or ABSBOTTOM |
| CONTROLS= CONSOLE or SMALL CONSOLE or PLAYBUTTON or PAUSEBUTTON
or STOPBUTTON or VOLUMELEVER |
| HIDDEN= TRUE (false is default) |
MASTERSOUND (used when grouping controls - must be present if NAME
is used for real sound) |
| NAME = (name given to set of controls - also useful for
Javascript controls) |
You can get more information about Liveaudio at the following address.
Netscape
Information about liveaudio and other Navigator3.0 media capabilities
Javascript can also be used to control liveaudio. A how-to
guide on using javascript to control Liveaudio
** Note the Midi sequence of Bach's Jesu, Joy of Man's Desiring used
this tutorial is from the wonderful MIDI archives site. Sequence ©
Pierre R. Schwob - by permission