Linking to an external sound file is the same as linking to any other external file.
Create a link which points to the file on the server, such as:
Listen to an excerpt from School House Rock's Conjunction Junction (.au format, 66Kb).
| Format | Extension | Description |
|---|---|---|
| AU/µ-law | .au | fully cross-platform, developed by Sun Microsystems; low quality 8-bit sound |
| AIFF/AIFC | .aiff, .aif | sound format used on Macintosh computers |
| WAVE/WAV | .wav | waveform sound recording, varying quality levels, primarily supported by Windows |
| MPEG Audio | .mp2 | multi-platform, but with limited support |
| MIDI | .mid | multi-platform; wide support; electronic music format, not recording |
| RealAudio | .rmi | streaming audio designed for the web; requires a special server for streaming and different linking methods |
If the person viewing your page links to the sound file and has the appropriate plug-in or helper application set up with their browser for the sound file type, they will be able to hear the sound.
Newer browsers support sounds embedded within an HTML document. Microsoft's Internet
Explorer supports the HTML tag (an MSIE extension) call BGSOUND, which may be used to
play AU, WAV and MIDI sound files. The syntax of this tag is:
Neither Netscape Navigator nor Communicator support the BGSOUND tag. Instead, use the
EMBED tag for Netscape version 2.0 or newer as follows:
The EMBED tag offers more control over an inline file than BGSOUND tag and is much more versatile. While BGSOUND is strictly for sounds, the EMBED tag may be used to display the output of many different plug-ins within the HTML document, providing the plug-in is installed in the user's browser.
The following table provides a description of the various attributes of the EMBED tag.
| Attribute | Values | Description |
|---|---|---|
| SRC | url | url to the file to embed in the document |
| ALIGN | LEFT|RIGHT|TOP|BOTTOM | positioning of output, same as for an IMG tag |
| AUTOSTART | TRUE|FALSE | indicates whether the plug-in should start playback automatically or wait for the user to start it |
| BORDER | number | number of pixels wide to make the border around the output |
| CONTROLS | TRUE|FALSE | toggle the display of plug-in controls on or off |
| FRAMEBORDER | YES|NO | toggle display of border around the embed frame |
| HEIGHT | number | number of pixels in height of the display frame; same effect as HEIGHT in IMG tag |
| HIDDEN | TRUE|FALSE | toggles display of frame on or off |
| HSPACE | number | number of pixels to the left and right of the frame; same as IMG tag |
| NAME | NAME=appletName | name of embed object for reference, ie. from JavaScript |
| PALETTE | FOREGROUND|BACKGROUND | specifies which color palette to use, applicable only in Windows |
| PLUGINSPAGE | url | url to the instruction page for installing the required plug-in |
| TYPE | MIMEtype | used instead of SRC for some types of plug-ins to identify the type of embed document |
| VSPACE | number | number of pixels to the top and bottom of the frame; same as IMG tag |
| WIDTH | number | number of pixels in width of the display frame; same effect as WIDTH in IMG tag |
| LOOP | number | number indicating how many times to repeat playing the embed. -1 means infinite loop |
| MASTERSOUND | none | no value; indicates this embed is the main sound source on the page |
| VOLUME | 0 to 100 | sets the playback volume of sound files between 0 and 100% of full volume |
Not all of the atttributes apply to every plug-in, and some plug-ins provide other attributes not listed in the table. To get the maximum usage out of the EMBED tag, find out the specific requirements and parameters associated with the various plug-ins you may be utilizing.
The space between the beginning and ending EMBED tags is used for browsers that do not support EMBED. These browsers will simply ignore the EMBED tag as unknown and display the contents instead. A browser that does support the EMBED will ignore the contents.
This is especially important if using the BGSOUND tag, since Internet Explorer version 3.01 and newer also supports the EMBED tag (though not all of the attributes that are supported by Netscape are supported by IE), and will try to play both the EMBED and the BGSOUND tags. By nesting the BGSOUND tag inside the EMBED tag, newer version of IE will play the EMBED sound, as will Navigator, and older versions of IE that do not support EMBED, but do support BGSOUND, will play the BGSOUND tag.
The above sound sound tag looks like this:
You should always set the volume low (30 to 50%) and let the user turn the volume up if necessary, rather than "blow" them out of their chair when your page loads. When your sound file plays and the volume is changed by the plug-in, that changes the actual system volume on the user's computer, not just the volume for your sound file!
In addition, it is good practice to not set the loop value too high (1 to 5 times, depending upon the sound). Some people become easily distracted (or annoyed) with a constantly repeating sound and will not likely stay long, or return. This is even more important if you HIDE the controls (HIDDEN=TRUE) preventing them from turning your sound off.
Linking to an external video file is the same as linking to any other external file.
Create a link which points to the file on the server, such as:
Watch the USS Enterprise jump into Hyperspace (.avi format, 337Kb).
| Format | Extension | Description |
|---|---|---|
| MPEG | .mpeg, .mpg | current standard on the web, though generally no sound as there are few mpeg players that handle sound |
| QuickTime | .mov | Apple's QuickTime format, gaining more widspread use; full support for sound as well |
| AVI | .avi | Windows video file format; full support for sound as well |
If the person viewing your page links to the video file and has the appropriate plug-in or helper application set up with their browser for the video file type, they will be able to see (and possibly hear) the video.
Internet Explorer supports the followin 4 attributes of the image tag:
These attributes enable the IMG tag to support inline AVI files embedded in HTML documents.
The DYNSRC attribute tells the browser where to find the AVI file. CONTROLS included in the IMG tag causes a simple set of controls to be displayed for stopping and starting the AVI. LOOP causes the AVI to repeat. -1 or INFINITE as a value of LOOP causes infinite repetition. START can have the values of FILEOPEN (default) or MOUSEOVER. FILEOPEN causes the AVI to start playing immediately upon the page loading, MOUSEOVER cause the AVI to start playing only when the mouse is passed over it.
Here is a sample of using the DYNSRC attributes with an IMG tag:
Notice that in Netscape, the jpeg image specified for the SRC attribute is displayed rather than the DYNSRC. To display video in Netscape, use the EMBED tag, similar to using sound files, as follows:
The EMBED tag poses a special problem between Internet Explorer and Netscape HTML documents. Both browsers support this tag for AVI files, but the viewers used in the page is dramatically different for display size. If you specify a height and width, the video will be distorted in Internet Explorer ir sized for Netscape, or there will be wasted space on the page if sized for Internet Explorer.
There is no real easy work around for this, other creating different pages. Not specifying the HEIGHT and WIDTH of the video frame causes the display to default to a square approximately 50 by 50 pixels in size, no matter the size of the AVI file.
Here is the EMBED tag used for this example:
Animation would not be overly useful if not embedded in the web page itself. So, there is no discussion here relating to external animation, other than you can crete links to files, such as animated GIFs, the same as any other external file.
One of the simplest methods of creating your own animation is using the MARQUEE element. This is an Internet Explorer extension, which is not supported by other browsers.
The syntax of the MARQUEE tag is:
Here is a sample marquee. The text will move if viewed in Internet Explorer, or be displayed as regular text in any other browser.
Here is the HTML which created this marquee:
Another popular method for including animations is using a special feature of GIF graphics which allows a GIF file to store multiple images and control the speed at which they are displayed. In order to create an animated GIF, you must create each "frame" or image required to form the animation as separate GIF files, then combine into an animated GIF using a program such as Alchemy Mindwork's GIF Construction Set.
This shareware program may be found at http://www.mindworkshop.com/alchemy/gifcon.html.
Detail instructions on creating animated GIFs are beyond the scope of this course. To use animated GIFs, simply use the IMG tag and reference the animated GIF as the SRC rather than a single image GIF file. If the browser supports animated GIFs, then the animation will run, otherwise, only the first image in the set will be displayed as a static image.
Remember that animated GIFs are considerably larger than a static image because each file stores ALL of the images involved in the animation, which must be downloaded whether the browser supports animated GIFs or not.
Sun Microsystems provides a set of java classes which may be downloaded and used to create animations combining sound and images. To use these classes you require the APPLET tag combined with PARAM tags. The APPLET tag's primary attributes are: CODE, WIDTH and HEIGHT. The PARAM tag requires the two attributes: NAME and VALUE. Anything placed between the opening and closing APPLET tags will be displayed by browsers that do not support Java and be ignored by browsers that so support Java.
Here is the code for the above Java animation:
Visit Sun at http://www.javasoft.com/applets/applets/Animator/index.html to learn more about these classes (and others).