9.12 Synchronizing Sounds to Events
NN n/a, IE 5(Win)
9.12.1 Problem
You want to play a sound associated
with the occurrence of an event on an element.
9.12.2 Solution
For the sake of simplicity, this solution works only in Internet
Explorer for Windows, with its ability to control the Windows Media
Player. The hard work goes in the HTML, making sure the
object element has the correct information to load
the player.
We'll add a pair of subtle sounds to the drop-down
menu navigation interface described in Recipe 10.8. A higher tone
sounds when the menu header is highlighted; a lower tone sounds when
an item in the menu is highlighted. Browsers do not offer any
built-in sounds, so this recipe assumes that you have recorded or
acquired two short and small sound files, called
hi.wav and lo.wav.
Starting with the HTML, add two <object>
tags, one for each sound:
<object id="hiPing" width="1" height="1"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="#Version=6,0,0,0">
<param name="FileName" value="hi.wav">
<param name="AutoStart" value="false">
</object>
<object id="loPing" width="1" height="1"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="#Version=6,0,0,0">
<param name="FileName" value="lo.wav">
<param name="AutoStart" value="false">
</object>
Next, add the following function to the page's
scripts:
function playSound(id) {
if (document.all && document.all[id].FileName) {
document.all[id].Play( );
}
}
Finally, wherever you want one of the sounds to play, invoke the
function and pass the ID of the sound object you wish to play:
playSound("hiPing");
In the case of the drop-down menu of Recipe 10.8, you should add
playSound("hiPing"); to the swap(
)
function just before the call the showMenu(
). Then add
playSound("loPing"); to the
toggleHighlight(
) function immediately before the
keepMenu( ) statement.
9.12.3 Discussion
Details in the <object> tag shown in the
Solution are for a relatively early version of Windows Media Player
(6.4), to ensure it works with IE 5 and later. The Play(
) command is forward-compatible with newer
versions of the player, but the classid attribute
loads the old player anyway. By repeating the tag for each sound, you
help preload both sounds as the page loads, minimizing any delay in
the first utterance of both sounds.
It's tricky to truly synchronize a sound with a
rapidly occurring event. First, the sound file must be of extremely
short duration, with virtually no attack delay or decay to it. A
short sound makes it more likely that the Player is ready for the
next command to play the sound while the user quickly rolls the mouse
pointer through a menu list. Even so, you may still not achieve
pinpoint precision in the attempted synchronicity. Controlling the
Media Player adds some latency to the equation.
That's why it's a good idea to
issue the Play( ) command prior to a visual change
triggered by the event.
Adding sound of any kind is a controversial topic among web
designers. Gratuitous background music that accompanies someone
reading a web site may be distracting, and perhaps enough to get an
employee in trouble for visiting your site during working hours.
Treat sound like any DHTML enhancement: something that should add
value to the presentation for those users equipped to take advantage
of it. This frequently means giving the user the opportunity to turn
off sound effects (or better yet, start with sound effects off, and
provide a button to turn them on).
Controlling sounds through other plug-ins or ActiveX controls is also
possible, but the range of browsers that support such activity is
somewhat limited. IE for the Macintosh (through Version
5.x) provides no connection between scripts and
plug-ins. The Netscape browsers do provide such connections
(Navigator 4 on Windows and Mac; Netscape 6 or later reliably only in
Windows), but the mechanism for communicating with plug-ins is
entirely different than shown in the Media Player example in the
Solution.
9.12.4 See Also
Recipe 10.8 for the drop-down navigation menu used for this
example.
| 
No comments:
Post a Comment