Table of contents:
Introduction | BGSOUND Tag | EMBED
Tag | Embedding Sound for Both Browsers | Accessibility
|
Assignments | Additional references | On
to Lesson 2.5
Sound is yet another area where the two major browsers support one common tag different ways. There are actually two tags, but one is supported only by Explorer. It's important to know your enemy, I mean tag, and make sure that you've covered your bases.
But first, the absolute simplest way to add sound is to link to the file. The code:
<a href="chop64v1.mid"> Chopin's Minute Waltz </a>
will produce the link Chopin's Minute Waltz.
But if you want to have the sound right there, ready to be clicked and played, or even worse, to be played when the page is loaded, then you'll need other tags. <EMBED> or <BGSOUND> are those tags. Have you ever visit a site and receive the alert that your browser is unable to start the midi file? Even though the music is playing??? This is because they haven't coded their page for BOTH Netscape and Internet Explorer, which as usual, never seem to do the same thing the same way. There is a right way to add music to your page that will let it play on either browser without causing the alert message to appear. Here's how:
<EMBED SRC="sample.wav" AUTOSTART="true" HIDDEN="false" LOOP="false">
To use this code, just change the "sample" to whatever the name of your file is.
Explorer's <BGSOUND> tag is the simplest way to embed background sound in your page. It may be placed either within the HEAD or the BODY portion of the page. Remember to turn ON your browser's "Play sounds" option, under "Edit"/"Internet-Options"/"Advanced". Here is an html code that will play the Minute Waltz ten times, every time you load it:
<HTML>
<HEAD>
<TITLE> Testing 123 </TITLE>
</HEAD>
<BODY>
<BGSOUND SRC="chop64v1.mid" LOOP=10>
</BODY>
</HTML>
Microsoft documents specify more parametets for the <BGSOUND> tag than are currently supported. The following table lists the parameters supported:
| Parameter | Description |
ID="idvalue" |
An identifier to be used for references in associated style sheet, hypertext
links, and JavaScript code. Must begin with a letter and may include underscores.
ID should be unique within the
scope of the document. If duplicated, the collection of identical-ID
elements may be referenced by their ordinal numbers. |
LOOP="n" |
Specifies how many times the sound will loop. |
SRC="url" |
Specifies the URL of the sound file. As shown above, sound files can be
in any recognizable format (for example: "midi,
wav, au") |
VOLUME="n" |
Determines the loudness of the background sound. Values may range from -10,000 (weakest) to 0 (loudest). Not supported by the MAC. |
You can reference the <bgsound> element in a JavaScript script. The sound-related properties are balance, loop, src, and volume. The src and loop properties are supported on both the PC and the Mac computers. The volume property is supported only on PC. Sound in Javascript is beyond the scope of this course.
In order to accomodate both of them (Netscape and Explorer), the simplest way
to add audio (as opposed to multimedia) to a web page is to <EMBED> the
sound. <EMBED> is supported by both browsers, and works more consistently
across the PC and Mac platforms. The <EMBED> tag introduces many features
that aren't supported by
The HTML code that generates a control panel is very simple:
<EMBED SRC="kegger2.wav" VOLUME="50" HEIGHT="60" WIDTH="144">
which produces the following result:
(click to play)
Try reading this page in both browsers. You'll be surprised to see that the design of the control panel is totally different. For example, Navigator's control panel includes a volume control while Explorer's has a position control. Also, Navigator 4.0.5 uses a different control panel than 4.0.4. Explorer features an optional digital display, invoked by right-clicking the control panel. Navigator does not have a digital display.
JavaScript support is also different between the two browsers. Navigator and Explorer support different sets of the <EMBED>'s attributes. Here are the attributes supported by both browsers:
| Attribute | Description |
SRC="URL" |
Specifies the URL of the sound file. Sound files can be in any recognizable
format (For example: "midi, wav, au") |
WIDTH="n" |
Specifies the width of the control panel. Optimum value=144. If less than 144 pixels or if omitted, Navigator truncates the control panel. If a larger number is specified, Netscape adds a blank area to its right side. Works in Explorer with that value as well. |
HEIGHT="n" |
Specifies the height of the control panel. Optimum value=60 pixels. Otherwise, same behavior as for WIDTH. |
ALIGN="alignoption" |
Specifies the alignment of the control panel. Use like the alignment of
images (<IMG> tag). Possible
options are: TOP, BOTTOM,
CENTER, BASELINE,
LEFT, RIGHT,
TEXTTOP, MIDDLE,
ABSMIDDLE, or ABSBOTTOM. |
NAME="name" |
Specifies the name of the object. Can be used to access the object from
JavaScript via document.name
|
HIDDEN="true"|"false" |
Specifies if the embedded object is visible (HIDDEN="false")
or hidden (HIDDEN="true"). The
default is HIDDEN="false". |
IMPORTANT: For the last attribute, HIDDEN, I recommend the "false" value, because I hate it when someone's music plays over something I am playing on my own speakers and I can't stop it. So, let's code to let people have their own preference. The world will keep turning if they don't play your music.
Now, support for the following attributes differs by browser. Where it works on only one of the two major browsers, I have bolded the one it works on--which of course is no help, because you cannot design for only one, now can you? (HInt: the answer to that rhetorical question is "No.") But knowledge is power, and it never hurts to know what may be supported in the future!
| Attribute | Description |
VOLUME="n" |
Specifies the sound volume. Range=0 to 100, 50 is default. Navigator's control panel reflects this setting when the element is loaded. Supported only by Netscape Navigator. |
LOOP="true"|"false"|"n" |
Specifies if the sound should be played continuously (LOOP="true"),
for a specified number of times (n),
or should not be repeated (LOOP="false").
Supported only by Navigator; You will get continuous sound on Explorer.
For same effect on Explorer, use playcount
(see below). |
PLAYCOUNT="n" |
Specifies the number of times to play the sound. Supported only by Explorer. |
PLUGINSPAGE="URL" |
Specifies the location of the plug-in software needed to run the sound file. This attribute is needed only if the plug-in software is not one of the common ones that are already installed on the computer. Supported only by Navigator. |
PLUGINURL="URL" |
Specifies the location of the software needed to install the specified plug-in (JAR Installation Manager). This attribute is needed only if the plug-in software is not one of the common ones that are already installed on the computer. Supported only by Navigator. |
HREF="URL" |
Converts the control panel into a hyperlink. Works like <A
HREF="URL"> and only with Explorer. |
TARGET="URL" |
Converts the control panel into a hyperlink. Works like <A
TARGET="URL"> and only with Explorer. |
AUTOSTART="true"|"false" |
Indicates if the sound track should start automatically upon loading.
A "true" value means it should,
a "false" value means it should
not. Explorer's default is "false"
while Navigator's is "true". The
default on the Mac is "false"
for both browsers. Unless you have a really good reason, use false! |
STARTTIME="mm:ss" |
Indicates the location on the track to begin the sound. Play will start immediately at the specified spot on the audio track. The start point is specified in minutes from the beginning of the track. The track begins to play immediately if you download it with AUTOSTART set to "true," or when you hit the play button if AUTOSTART is set to "false." If you specify a time longer than the clip's length, an error message is displayed. Supported only by Navigator. |
ENDTIME="mm:ss" |
Indicates the location on the sound track to end play. The end point is specified in minutes from the beginning of the track. Supported only by Navigator. |
There is a correct way to add music to your page so that it will play on either browser without causing the alert message. Here's the code:
<EMBED SRC="sample.wav" AUTOSTART="true" HIDDEN="false" LOOP="false">
<NOEMBED> <BGSOUND SRC="sample.wav" LOOP="1"> </NOEMBED> </EMBED>
To use this code, just change the "sample" to whatever the name of your file is.
The number one priority for accessibility according to the World Wide Web Consortium (W3C), the organization to watch for Web standards, is:
"1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video."( http://www.w3.org/TR/WCAG10/full-checklist.html)
That's clear enough, I think. The text equivalent can consist of a link that will be opened by browsers designed for other-abled persons using the Web. Although these relate more to video and will be repeated in the Video unit, it's worth noting that their checklist further states:
The easiest thing to do is provide an alternate page with your presentation, sounds and all, explained all the way through as text, so that a User Agent can read it to the user. Whatever you do, do not ignore the issue of accessibility. More and more, developers are being judged on points such as this in addition to the quality of their work. And as the lobbies for the other-abled get stronger, it will become a required part of any commercial page containing anything other than text. So do yourself and your users a favor and get used to doing this now!
W3C Consortium Accessibility Checklist Web Page