"Multimedia" is probably the oldest buzzword in the computer industry, and its definition keeps changing. In the 80s, decent graphics and sound were enough to make a multimedia computer system. Now the term includes such things as CD-ROM, CD-quality audio, and full-motion video.
As far as the Web is concerned, multimedia generally means having more than the usual media-text and images-on your Web page. Alternate forms of media can be supported on a Web page in two key ways:
Although JavaScript is a simple language, it can work with multimedia. In this chapter, you'll explore what it can-and can't-do. You'll start with a look at sounds and their use in JavaScript, then continue with a discussion of plug-ins.
JavaScript doesn't include any special functions to play sounds. However, it's easy to force a sound to load and play in JavaScript. You can do this by setting the window.location.href property-the same thing you set when forcing the user to load another page.
The result is the same as if the user clicks on a link to the sound. The file is downloaded, and after the download is complete, the sound player application plays the sound.
By using this technique, you can play a sound at any time during
the execution of your JavaScript application. This could be as
an event handler, as an alternative to an alert
message, or just to annoy the user.
| Tip |
Speaking of annoying the user, keep in mind that network connections aren't always fast. It's best to stick to small, easily downloaded sounds to keep things fast and smooth. |
Most of the recent versions of Netscape automatically install a helper application for sounds (.wav and .au files) called the Netscape Audio Player, or NAPLAYER.EXE. If you don't have a player configured, you can choose NAPLAYER.EXE from the NETSCAPE\PROGRAMS directory.
There is one problem with Netscape's audio player: it stays on top after it finishes playing the sound, so keep in mind that some users will have to close the Audio Player window after each sound is played. You may wish to recommend a sound player that exits after playing the sound; one program that does this is the shareware WPLANY.EXE.
As an example of sounds in JavaScript, the application in Listing 13.1 uses events to trigger sounds. The example sounds used in this application are included on the accompanying CD-ROM.
Listing 13.1. (SOUNDS.htm) An application that plays sounds on various JavaScript events.
<HTML>
<HEAD>
<TITLE>Sounds on JavaScript Events</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function playsound(sfile) {
// load a sound and play it
window.location.href=sfile;
}
</SCRIPT>
</HEAD>
<BODY
onLoad="playsound('zap.wav');"
onUnload="playsound('click.wav');" >
<H1>Sounds on JavaScript Events</H1>
<HR>
The following are some examples of JavaScript event handlers used to
play sounds. You should have also heard a sound play when this page
loaded; you'll hear another one when you unload this page.
<HR>
<a href="#" onClick="playsound('zap.wav');">
Click here for a sound
</a>
<FORM NAME="form1">
<INPUT TYPE="button" VALUE="Button to Play a Sound"
onClick="playsound('click.wav');">
</FORM>
</BODY>
</HTML>
Figure 13.1 shows this example in action, complete with the Netscape Audio player. To truly appreciate it, though, you need to try it yourself-although your Web page can include sound, this book can't.
Figure 13.1 : The output of the sound player example.
Plug-ins are a new alternative to helper applications, developed by Netscape for Navigator 2.0. There are currently a wide variety of plug-ins available for various types of files. Even Microsoft has gotten into the act; the latest version of Microsoft Internet Explorer (MSIE) also supports Netscape-compatible plug-ins.
Plug-ins are developed by third parties (or by browser developers, in some cases) using an API available from Netscape. The plug-in is able to use the resources of the browser and display its output within the browser window.
Here is a sampling of the plug-ins currently available, most at
little or no charge:
| Tip |
I don't have room to list all the available plug-ins here; such a list could probably fill its own book. See appendix C, "Online JavaScript Resources," for a list of online resources for plug-ins. |
| Note |
Plug-ins are not platform-independent. If a plug-in manufacturer wants to support multiple platforms, it has to create a separate version of the plug-in for each platform. Many plug-ins are available exclusively for Windows or for the Macintosh. |
You can place a plug-in document in a Web page using the <EMBED> tag, an extension to HTML. For example, the following HTML tag inserts a PDF file at the current location in the page:
<EMBED SRC="doc.pdf">
For plug-ins that take up an area of the screen, such as video players and graphics, you can specify HEIGHT and WIDTH attributes to limit the size of the embedded object, as with an ordinary image. For example, the following PDF document is limited to a 200-by-100-pixel square:
<EMBED SRC="doc1.pdf" WIDTH=200 HEIGHT=100>
JavaScript enables you to work with plug-ins in a number of ways:
You'll look at each of these capabilities in the following sections.
The plug-in features were added in Netscape version 3.0 beta. Two objects are available, as children of the navigator object, that can give you information about plug-ins. All properties of these objects are read-only.
These objects are explained in detail in the next sections.
The navigator.plugins object is an array with one entry for each of the available plug-ins. You can find out how many plug-ins are installed with the expression navigator.plugins.length.
Each element of the plugins array is an object in itself, called a plugins object. The plugins object has the following properties:
The plugins object has a single method, refresh. This method enables you to update the installed plug-ins list without exiting Netscape. For example, if the user has installed a new plug-in, this will add it to the list. The syntax is simple:
navigator.plugins.refresh();
You can add a single argument (true) to the refresh method to change its behavior. If the parameter is true, Netscape will also automatically reload any page that requires the plug-in.
This makes it possible for you to check for a plug-in and display
a link to download
it if it is not installed. Your program can then refresh the plug-ins
list and reload the page automatically. See the task later in
this chapter for an example of checking for a plug-in.
The navigator.mimeTypes array contains an element for each MIME type currently supported by Netscape or by a plug-in. Each element of the array is a mimeType object, which includes the following properties:
Along with getting information about plug-ins, JavaScript can actually exercise some control over them. This is provided as part of LiveConnect, Netscape's system for communication between JavaScript, Java applets, and plug-ins.
In order for this to work, a plug-in developer must include LiveConnect features in the plug-in. These can allow the following:
Because LiveConnect is in its infancy at this writing, there are few plug-ins that work this way yet. One example that has been announced is the LiveAudio plug-in, which ships with Netscape Navigator 3.0. This plug-in can play sounds, and you can control it with JavaScript. For example, this HTML tag embeds a sound:
<EMBED SRC="click.wav" NAME="click" VOLUME=100 HIDDEN=true AUTOSTART=false>
Once the sound is embedded, its methods become accessible to JavaScript:
Watch this book's Web site (listed in the introduction) for a full-scale JavaScript application that works with embedded sounds.
Using the navigator.plugins object, you can easily make a program to display a list of currently available plug-ins. Listing 13.2 is such a program. The name, filename, and description for each plug-in are listed in a table.
Listing 13.2. (PLUGINS.htm) A program to list available plug-ins.
<HTML>
<HEAD>
<TITLE>List of Plug-Ins</TITLE>
</HEAD>
<BODY>
<H1>List of Plug-Ins</H1>
<HR>
The following is a list of the plug-ins installed in this
copy of Netscape, generated using the JavaScript
navigator.plugins object:
<HR>
<TABLE BORDER>
<TR><TH>Plug-in Name</TH>
<TH>Filename</TH>
<TH>Description</TH>
</TR>
<SCRIPT LANGUAGE="JavaScript">
for (i=0; i<navigator.plugins.length; i++) {
document.write("<TR><TD>");
document.write(navigator.plugins[i].name);
document.write("</TD><TD>");
document.write(navigator.plugins[i].filename);
document.write("</TD><TD>");
document.write(navigator.plugins[i].description);
document.write("</TD></TR>");
}
</SCRIPT>
</TABLE>
</BODY>
</HTML>
This program should be easy to understand. It uses the navigator.plugins.length property to determine the number of plug-ins. For each one, it displays table cells containing the properties. Figure 13.2 shows the list generated by this program.
Figure 13.2 : The list of available plug-ins as generated by the example program.
Similarly, you can create a program to list the available MIME types on your system. Listing 13.3 shows a program that lists each type in a table along with its description, the plug-in that handles that type, and the suffixes used for that type of file.
Listing 13.3. (MIMETYPE.htm) A program to display a list of available MIME types and their properties.
<HTML>
<HEAD>
<TITLE>List of MIME Types</TITLE>
</HEAD>
<BODY>
<H1>List of MIME Types</H1>
<HR>
The following is a list of the MIME types installed in this
copy of Netscape, generated using the JavaScript
navigator.mimeTypes object:
<HR>
<TABLE BORDER>
<TR><TH>MIME Type</TH>
<TH>Description</TH>
<TH>Current Plug-in</TH>
<TH>Extensions</TH>
</TR>
<SCRIPT LANGUAGE="JavaScript">
for (i=0; i<navigator.mimeTypes.length; i++) {
if (navigator.mimeTypes[i].type.indexOf("zz") == -1) {
document.write("<TR><TD>");
document.write(navigator.mimeTypes[i].type);
document.write("</TD><TD>");
document.write(navigator.mimeTypes[i].description);
document.write("</TD><TD>");
document.write(navigator.mimeTypes[i].enabledPlugin);
document.write("</TD><TD>");
document.write(navigator.mimeTypes[i].suffixes);
document.write("</TD></TR>");
}
if (i > 55) break;
}
</SCRIPT>
</TABLE>
</BODY>
</HTML>
This program works in the same fashion as the previous example. It iterates through the navigator.mimeTypes array and displays the properties for each type. The list generated by this program is shown in Figure 13.3.
Figure 13.3 : The list of available MIME types as generated by the example program.
Often, all you need to do with JavaScript is decide whether to attempt to display a plug-in document. You can check for support of the required plug-in, and if it isn't found, you can insert alternate content, or simply advise the user that the plug-in is needed.
For example, this code checks for the Shockwave plug-in. If it's installed, the Director movie is embedded in the document; otherwise, a message about the plug-in is displayed.
test = navigator.plugins["Shockwave"];
if (test)
document.writeln("<EMBED SRC='test.dir' HEIGHT=50 WIDTH=100>")
else
document.writeln("The Shockwave Plug-in is required for this part of the
page.")
You are simply displaying a message that the plug-in is required. As noted earlier, you could also provide a link to download the plug-in, then use the refresh method of the plugins object to add it to the plug-ins list and reload the document.
You should now understand how to use JavaScript to work with multimedia. You've learned the following:
Continue your studies of JavaScript with one of the following:
| If users don't have a plug-in that my page requires, is there any way to make their browsers automatically download and install it? | |
| Not presently, and this probably won't be a JavaScript feature in the future. However, Netscape is considering a similar feature to be built in to a future version of Navigator (probably version 4.0). | |
| Is there any possibility of true integration of JavaScript with plug-ins-for example, being able to add event handlers to parts of a video image or PDF document? | |
| Not at present, and trying to do this would open quite a can of worms for Netscape-particularly because each of the plug-in vendors would have to add JavaScript support. | |
| Is there any disadvantage to using plug-ins on my pages? | |
| Yes. First of all, you'll be restricting the page to users of plug-in compatible browsers; second, they will need the plug-in itself installed. Many users will consider this too much work just to view one Web page. |