Lesson 20 - Soundbites and Javascripts
This is going to be a very short lesson, with only a couple of miscellaneous tidbits that you can explore further if you'd like. Neither of these items are required on the website project, but they offer an endless amount of variety and things to play with.
Soundbites
You may decide to add sound files to your final project. This is actually a very simple line of code to add, if all your readers use Internet Explorer. Unfortunately, the tag <bgsound> is not supported by any other browser. Other browsers treat audio multimedia as separate documents, downloaded and displayed by special helper applications, applets, or plug-ins.
But, if you have Internet Explorer as one of your browsers, you can try the following:
- In the body of your document, add the <bgsound> tag, along with two attributes.
- src="exit.wav" is going to be the name of your sound file. wav files have the capability of being readable by all browsers.
- loop="2" attribute tells the browser how many times to repeat the sound file. You could also put loop="infinity", but people tend to get irritated by too much noise.
- This is how your code will look: <bgsound src="exit.wav" loop="2">
You can listen to this sound file that has been added to this home page, but only if you have Internet Explorer. If you're using Netscape, Mozilla, Safari, or any other browser, the page will look just the same and you won't hear anything.
You can find lots of sound files, music and special effects at this site: http://www.wavsource.com
A word of caution about sound files: they take time to download, and in our attention deficit disordered world, if your page hasn't loaded in 17 seconds, your readers will be gone.
Javascripts
There are archives full of Javascripts that programmers create and share with the world. These are short little snippets of programming that you can copy and paste into your HTML document to perform specific jobs, such as displaying a clock, calculating figures, determining 5 working days from now, etc.
The Javascript that is displayed below will install a small rectangle on your page that displays the current time. This one involves 3 separate steps:
- Copy and paste a chunk of code into the head section of your document (between the <head> and </head> tags).
- Change the <body> tag to include an onload attribute.
- Copy and paste a chunk of code into the body section of your document (between the <body> and </body> tags.
1. Copy and paste this code between your <head> and </head> tags, for example after the <title> tags.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var timerID = null;
var timerRunning = false;
function stopclock ()
{
if(timerRunning) clearTimeout(timerID);
timerRunning = false;
}
function showtime ()
{
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeValue = "" + ((hours >12) ? hours -12 :hours);
if (timeValue == "0") timeValue = 12;
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += ((hours >= 12) ? " P.M." : " A.M.");
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock()
{
stopclock();
showtime();
}
// End -->
</SCRIPT>
|
2. Change the <body> tag to read like this:
<body onLoad="startclock()"> |
3. Copy and paste the following chunk of code someplace in the body of your document, between the <body> and </body> tags. Make sure that you put it before the closing </body> and </html> tags.
<p align="center" >
<form name="clock">
<input type="text" name="face" size=13 value="">
</form>
</p>
<p align="center" >Free JavaScripts provided <br>
by <a href="http://javascriptsource.com">The JavaScript Source</a>
</p> |
Here's what the page looks like when run through the browser. Click on the image for a larger-sized image.
You will find the clock at the bottom of the page.
This is the end of Lesson 20. Please go to the next lesson.
|
