Demonstration of How to Work with Sound in Web Browsers

by Stephen Wilson, Professor, Conceptual/Information Arts Program, SFSU


Using Sound in Web Browsers

Sound is more complex than images in to work with in web browsers.  There are several approaches: 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)

The Infoarts Web Authoring Howtoguide page offers links to pages that explain web sound formats.
 

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.)
 
 
Link to "jesu-joy.mid**" file on infoarts server ** 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

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>

 
play sound - looping
<embed src="file.wav"  hidden="true" loop="true" autostart="true"> 
 <noembed> 
    <bgsound src="file.wav" loop="-1"> 
 </noembed>
</embed>


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.
 

<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                      codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                      width="180" height="160"
                      id="movie1" >

               <PARAM name="src" value="My.mov">
               <PARAM name="Autoplay" value="true">
               <PARAM name="Controller" value="false">


               <EMBED width="180" height="160"
                      src="My.mov"
                      name="movie1"
                      autoplay="true"
                      controller= "false"
                      enablejavascript="true">
                  <noembed>
                    <bgsound src="file.wav" loop="0">
                   </noembed>
               </EMBED>
              </OBJECT>




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 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.

Here is a control panel with basic settings.


 
Basic embed tag with controller shown - cross-browser

<embed src="http://userwww.sfsu.edu/~infoarts/technical/howto/sound/jesu-joy.mid"  width="144" height="60" autostart = "false">
<noembed>
 <bgsound src="http://userwww.sfsu.edu/~infoarts/technical/howto/sound/jesu-joy.mid" autostart = "false"  loop="-1">
 </noembed>
</embed>

The object  would use this parameter setting
<PARAM name="Controller" value="false">

Just to cover all possibilities you should set the values both within the embed and the object tags . Check above in example of OBJECT tag for the syntax

If you don't use the hidden = "true"  or the <param name="cotnroller" value = "true">  options, the controller will appear    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.  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" or the  <param name="cotnroller" value = "false"> option
 


Options within EMBED tags


Many plug-ins give you the ability to set several options for the sound.  For example, you could set volume level, start and end time, display qualities for the controller, etc.  Unfortunately the options offered and the syntax of their use varies with each plug in.  Here are some examples for Quicktime.  Additional details on parameters are available at apple's developer site: 
 http://developer.apple.com/documentation/QuickTime/Conceptual/QTScripting_HTML/QTScripting_HTML_Document/chapter_1000_section_3.html

 
 

-------Quicktime-----------

Quicktime offers the ability to set all these options.  Only some of them pertain to sound and some of them will only work for sound files saved in mov format.   More details for quicktime embed options are available at:  http://www.apple.com/quicktime/authoring/embed.html   .  Some examples are offered below.

Options in quicktime EMBED:

AUTOHREF; AUTOPLAY; BGCOLOR=HEX; BGCOLOR=NAME; CACHE; CONTROLLER; CORRECTION; DONTFLATTENWHENSAVING; ENABLEJAVASCRIPT; ENDTIME; FOV; GOTOn; HEIGHT; HIDDEN; HOTSPOTn; HREF; KIOSKMODE; LOOP; MOVEID; MOVIENAME; NODE; PAN; PLAYEVERYFRAME; PLUGINSPAGE; QTNEXTn; QTSRC; QTSRCCHOKESPEED; QTSRCDONTUSEBROWSER; SCALE; SRC; STARTTIME; TARGETn=FRAME_NAME; TARGET=MYSELF; TARGET=QUICKTIMEPLAYER; TARGETCACHE; TILT; TYPE=MIMEtype; URLSUBSTITUTEn; VOLUME; WIDTH
 

Setting start and end time:

Start and end times can be set for sounds.  Usually time must be set in the time indicators used for movie format - Hours:Minutes:Seconds:Frames (30ths).  For example,  starttime="00:00:05.15"  would start sound at the place of 5 seconds and 15 frames.  (since there are 30 frames in a second 15 frames equals 1/2 second.     Endtime="00:00:11.00" would stop it at 11 seconds.  For sounds in other formats than .mov the starttime and endtime are indicated differently.  The second dyad is the seconds.  Thus starttime = "00:15:00:00" would start at 15 seconds and endtime =  "00:28:00:00" would stop at 28 seconds.  Autostart needs to be set to false.

<embed src="jesu-joy.mid" width="200" height="240" starttime= "00:15:00:00"  endtime= "00:28:00:00" autostart = "false" >

Here is how you would do it with object parameters

<PARAM  name ="Starttime" value = HH:MM:SS:FF>
<PARAM name = "Endtime"  value = HH:MM:SS:FF>
(Hours:Minutes:Seconds:Thirtieths)

Setting volume level

Volume is set on a 0 to 100 scale.  Thus a volume = "50" would set in middle range. Autostart needs to be set to false.

 
<embed src="jesu-joy.mid"  width="200" height="240" volume="50" autostart = "false">

  Here is how you would do it with OBJECT parameters
<PARAM  name="Volume"  value= "50">
 Percent (0–300)

----------BGSOUND--------

The bgsound object offers the ability to set these parameters.  Balance(LR speaker), Loop, Volume,  In addition it offers several others for control by Javascript.  It only works on Internet Explorer.  On Netscape it won't show up.

<bgsound = "jesu-joy.mid"  volume = "-5000"  loop = 2  balance = "5000">
 
 

Microsoft Developer Network Reference on BGSOUND at javascript control
 


Streaming Sound

Streaming audio has special requirements in encoding the audio and arranging the links.  Streaming means that the audio plays as it comes acrross the Internet rather than requiring total download before playing.  Several different formats allow for streaming - RealVideo, RealAudio, Quicktime, and Windows media player.

For more information see the Infoarts guide to streaming audio
 


Javascript Control of Sound


Javascript can also be used to control audio.  It opens up many new opportunites in interface and subtley of control.. See the Infoarts how-to guide on using javascript to control audio
 
 
- 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)