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.
Play test sound full control panel
<EMBED SRC="test2.aiff" WIDTH=144 HEIGHT=60 CONTROLS=console>
      
Play test sound small control panel
<EMBED SRC="test2.aiff" WIDTH=144 HEIGHT=15 CONTROLS=Smallconsole>
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.
<EMBED SRC="test2.aiff" WIDTH=80 HEIGHT=20 CONTROLS=volumelever>
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.
Play test sound start at 3 secs end at 8 secs
<EMBED SRC="jesu-joy.mid" STARTTIME=0:3 ENDTIME=0:8 WIDTH=144 HEIGHT=15
          CONTROLS=Console >

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.
Play test sound 50 % volume, loop 3 times
<EMBED SRC="test2.aiff" WIDTH=144 HEIGHT=60 CONTROLS=console VOLUME=50
          LOOP=3>

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">
 All of this text appears to the left of the sound control console
and fills the space just as it would with a right aligned image. 

  

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
- This page created by Stephen Wilson, Professor Conceptual/Information Arts, SFSU (http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu 
- More information about the Conceptual/Information Arts program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele.index.html)
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books) by Stephen Wilson
- The url of this page is (http://userwww.sfsu.edu/~infoarts/technical/sound/wilson.howtoliveaudio.html)