Exercise Question

A suggested solution to this question can be found in Appendix A.

Question 1

Using the RealPlayer plug-in/ActiveX control, create a page with three images, so that when the mouse pointer rolls over them a sound is played. The page should work with NN and IE 4+. However, any other browsers should be able to view the page and roll over the images without errors appearing.

<html>
<head>
    
<script language=JavaScript>
    
function play(fileName)
{
   document.real1.SetSource(fileName);
   document.real1.DoPlay();
}
    
    
function window_onload()
{
   var plugInInstalled = false;
    
   if (navigator.appName.indexOf("Microsoft") == -1)
   {
      var plugInCounter;
    
      for (plugInCounter = 0; plugInCounter < navigator.plugins.length;
           plugInCounter++)
      {
         if (navigator.plugins[plugInCounter].name.indexOf("RealPlayer") >= 0)
         {
            plugInInstalled = true
            break;
         }
      }
   }
   else
   {
      if (real1.readyState == 4)
         plugInInstalled = true;
   }
    
   if (plugInInstalled == false)
      window.location.replace("NoRealAudioPage.htm");
}
    
</script>
    
<object classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
   id="real1" VIEWASTEXT>
   <param name="height" value="0">
   <param name="width" value="0">
<embed name="real1" id="real1"
   border="0"
   controls="play"
   height=0 width=0 type="audio/x-pn-realaudio-plugin">
</object>
</head>
<body onload="window_onload()">
<A onmouseover="play('Evil_Laugh.ra')"
   onmouseout=document.real1.DoStop();
   href="#">
   <img src="AdvertImage1.jpg" border=0>
</A>
<A onmouseover="play('Whoosh.ra')"
   onmouseout=document.real1.DoStop();
   href="#">
   <img src="AdvertImage2.jpg" border=0>
</A>
<A onmouseover="play('Explosion.ra')"
   onmouseout=document.real1.DoStop();
   href="#">
   <img src="AdvertImage3.jpg" border=0>
</A>
</body>
</html>

Save this as ch15_q1.htm.

This solution is based on our RealPlayer example in the chapter. Note that the three sound files, Evil_Laugh.ra, Whoosh.ra, and Explosion.ra, can be found in the code download for this book.

We verify that the user has the ability to play RealAudio files in the window onload event handler, which calls the window_onload() function.

Just as the IE and NN support of plug-ins is different, so therefore are the means of checking for a plug-in. For NN we go through the navigator object's plugins array and check each installed plug-in for the name RealPlayer; if it's found, we know they have the RealAudio player installed.

With IE we simply use the real1 ActiveX control's readyState property to see if it's installed and initialized correctly.

To play the sounds, we've defined a function called play() whose parameter is the name of the .ra (or .rm) sound file to be played.

function play(fileName)
{
   document.real1.SetSource(fileName);
   document.real1.DoPlay();
}

The function makes use of the RealAudio player's setSource() method to set the sound file to be played and the DoPlay() method to actually start playing the clip. We have used different sounds for each image by simply specifying a different file name as the parameter for the play() function.

We need to use the onmouseover and onmouseout events to start playing the sound when the mouse pointer is over the image and stop it when the mouse pointer moves out of the image. However, in NN 4 the img object does not have these event handlers, so we need to wrap the image inside an <A> tag, which does have them. The onmouseout event starts playing the audio clip by calling our play() function, and the onmouseout event stops the playing by calling the RealPlayer's DoStop() method.

<A onmouseover="play('audiosig.ra')"
   onmouseout=document.real1.DoStop();
   href="#">
   <img src="RedImage.jpg" border=0>
</A>