Intranet Journal: JavaScript By Example

Basic JavaScript with Examples
A tutorial with reusable code snippets

Page 1 2 3

Playing on-demand sound

A page with sound can be really nice! This not only gives users something to listen to when they are visiting, it also makes your site more multimedia savvy. With JavaScript, you can play sound when the document is loaded or exited, or when the user clicks a link. The following listing will show you how we can use an image as a link for playing an on-demand sound.

Playing on-demand sound

<HTML>
<HEAD>
<TITLE>Playing on-demand sound</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function play(){
   window.location = "sample.au"
}
</SCRIPT>
</HEAD>
<body bgcolor=ffffff>
<h2>Playing on-demand sound:</h2>
<b>Please click on the image below</b><br>
<a href="/corner/ex5_:play()"><img src="sound.jpg" border=0></a>
</body>
</HTML>

Test This Example

First we had an image that calls the function play(). Notice the way we linked the function: javascript:play(). This makes sure that this hyperlink is a JavaScript link that should call the function play(). The play function uses the location property of the document object and simply points to the sound file.

You should note that if you want to play other files such as a Shockwave file, all you need to do is replace the "sample.au" with the appropriate content - for example, "myShockwaveMovie.dcr" (assuming the requisite plug-in is resident.)

Scrolling Banner

The next example will show you how to create a scrolling banner that will display your text on the browser's status bar. This is a useful script as it can display a scrolling message you might want your visitors to see. A banner can grab your visitor's attention and thus is a great way to pass on your information.

The difference between this scrolling banner and others you have seen is that you can control the banner's speed and pause the scrolling. Let's see the script:

Scrolling banner

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var b_speed=8;   //defines banner speed
var banner_id=10;
var b_pause=0;   //to pause the banner
var b_pos=0;

function stop() {
   if(!b_pause) {
      clearTimeout(banner_id);
      b_pause=1;
   }
   else {
      banner_main();
      b_pause=0;
   }
}

function banner_main() {
   msg="W e l c o m e  to  J a v a S c r i pt!"
      +"  JavaScript can do some really"
      +"  Cool stuff.  Check out http://rhoque.com"
      +" for more examples..."

   var k=(40/msg.length)+1;
   for(var j=0;j<=k;j++) msg+="     "+msg;
      window.status=msg.substring(b_pos,b_pos+120);
      if(b_pos++==msg.length){
         b_pos=0;
      }

   banner_id=setTimeout("banner_main()",1000/b_speed);
}

</script>
</head>

<TITLE>Banner</TITLE>
</HEAD><BODY BGCOLOR="ffffff">
<H2> Example 5.8:</h2>
<P ALIGN=Center>
<FORM name="form1" action="">
<P ALIGN=Center>
<input type="button" value="Start"
onclick='{
   clearTimeout(banner_id);
   b_pos=0;
   banner_main()
   }'>
<input type="button" value="Slower" onclick='
{
   if (b_speed<3){
      alert("Does not get any slower!");
   }
   else b_speed=b_speed-1;
}'>
<input type="button" value="Faster" onclick='
{
   if (b_speed>18){
      alert("Does not get any faster!");
   }
   else b_speed=b_speed+2;
}'>
<input type="button" value="Pause" onclick='stop()'>
<input type="button" value="Reset" onclick='b_speed=8;'>
</FORM>
</BODY>
</HTML>

Test This Example

The script is simple, with 3 or 4 important parts. There are two functions: stop() and banner_main(). The stop() function is used to pause the scrolling text. First we check if the banner is paused, if it is not, we use the clearTimeout() method to pause the banner and make the b_pause variable true. When the user clicks on the Pause button, the function calls the banner_main() function. Lastly, we make the b_pause variable false.

In our banner_main() function, we first assign a value to the variable msg. Then, we take the length of msg, divide that by 40, and add one to the result. This value is assigned to k. Now a loop is used from j to k to add the blanks to the value of msg. Next, we display the banner in a window's status bar by taking the substring of msg from 0 to 120. Later we see if the b_pos becomes as long as the msg length and set the b_pos equal to zero again.

To make the banner go faster we just increase the value of b_speed, and to make the banner go slower we decrease the value of b_speed.

Page 1 2 3

The Author

Reaz Hoque (pronounced Re-oz Hawk) is an author, software developer, speaker and web designer. Recently he worked on the development team for one of the world's first on-line commercial applications for General Electric's startup company Public Sourcing Services. In addition to web development, Reaz is accomplished in Pascal, Visual Basic, Assembler, C++, and SQL. His articles are seen regularly on various online and print magazines. Reach Reaz with comments at rhoque@rhoque.com.