In Chapter 4, you were introduced to the helper application RealAudio, created by a company called Progressive Networks. It just so happens that Progressive Networks also has a RealAudio plug-in that enables you to embed all the functionality of the helper application directly into your Web page.
The folks at Progressive Networks came up with a great tutorial for using a RealAudio plug-in for embedded audio. This tutorial serves as the basis for this chapter. You will see how the RealAudio plug-in makes extensive use of attributes with the HTML EMBED tag.
To make it possible for plug-ins to coexist with other objects on a Web page, Netscape designers came up with the EMBED tag for HTML. This new tag allows your plug-in to become a seamless part of a Web page, with no difference to the user. It has the following syntax:
<EMBED src height hidden palette pluginspace src type width units>
In this syntax, height, hidden, palette, pluginspace, src, type, width, and units are called attributes of the EMBED tag. These attributes, along with any others that your plug-in defines, are passed to the plug-in at load time. You can think of this as a command line similar to arguments passed into a text-based C program.
Attributes are passed in as name=value pairs. The attribute names are not case-sensitive. See Chapter 7, "Navigator Plug-In Design Considerations," for documentation on EMBED tag attributes.
Plug-in developers are encouraged to extend the EMBED tag attributes to meet specific needs. The RealAudio plug-in makes full use of this feature by adding the CONTROLS, AUTOSTART, CONSOLE, and NOLABELS attributes. This is an excellent example of how to modify a plug-in's appearance based on the HTML code. Working examples of these RealAudio configurations can be found at the following address:
http://www.realaudio.com/products/ra2.0/plug_ins
Figure 5.1 shows the Web page located at this URL.
Figure 5.1 : The "Using the RealAudio Plug-in" Web page.
The default user configuration of the RealAudio plug-in looks very much like that of its sibling, the RealAudio helper application. This configuration consists of multiple controls, title, author, copyright, and status information. Progressive Networks, realizing that many Web page authors do not need or want all of this control and information, made it possible to pick and choose sections of the RealAudio player for user interaction. To do this, they invented the CONTROLS attribute and assigned it 11 different values.
The first control type, CONTROLS=ALL, contains the whole ball of wax and, again, looks much like the RealAudio. This is the default view if no CONTROLS attribute is specified. Audio can be played, paused, and stopped via the appropriate buttons with VCR-style graphics. Information such as title, author, copyright, modem speed, and stream position are displayed. Audio playback position can be changed with either a slider control or arrow buttons. Volume is changed with a vertical slider.
Figure 5.2 shows the results of using the following EMBED tag:
Figure 5.2 : Using CONTROLS=ALL with the RealAudio plug-in.
<EMBED SRC="all.rpm" WIDTH=300 HEIGHT=134>
Note that the CONTROLS attribute is not used, because ALL is the default.
The next option, CONTROLS=ControlPanel, gives a user the basic Play/Pause button, Stop button, and Position slider. This is the same as the RealAudio helper application with none of the View main menu items checked.
Figure 5.3 shows the results of using the following EMBED tag:
Figure 5.3 : Using CONTROL=ControlPanel with the RealAudio plug-in.
<EMBED SRC="cpanel.rpm" WIDTH=350 HEIGHT=40 CONTROLS=ControlPanel>
CONTROLS=InfoVolumePanel shows the title, author, and copyright with a slider. This is the same as the RealAudio helper application with Info & Volume checked in the View main menu item.
Figure 5.4 shows the results of using the following EMBED tag:
Figure 5.4 : Using CONTROLS=InfoVolumePanel with the RealAudio plug-in.
<EMBED SRC = "infovol.rpm" WIDTH=350 HEIGHT=80
CONTROLS=InfoVolumePanel console="Tester">
The EMBED line also includes the CONSOLE attribute. This attribute enables you to tie together multiple RealAudio controls. A full example of using the CONSOLE attribute is shown later in Figure 5.13.
CONTROLS=InfoPanel is the same as InfoVolumePanel minus the volume control. This panel displays the title, author, and copyright. Again, notice the floating Play/Pause and Stop buttons that are connected to the information panel with the CONSOLE attribute.
Figure 5.5 shows the results of using the following EMBED tag:
Figure 5.5 : Using CONTROL=InfoPanel with the RealAudio plug-in
<EMBED SRC="infovol.rpm" WIDTH=320 HEIGHT=80
CONTROLS=InfoPanel console="Tester">
CONTROLS=StatusBar embeds a status bar. Status includes informational messages, position, and clip length. This is the same as the RealAudio helper application with the Status Bar of the View menu item checked.
Figure 5.6 shows the results of using the following EMBED tag:
Figure 5.6 : Using CONTROLS=StatusBar with the RealAudio plug-in.
<EMBED SRC="stat_bar.rpm" WIDTH=350 HEIGHT=22
CONTROLS=StatusBar console="Tester">
CONTROLS=PlayButton is, as you would expect, an embedded play button. You can get some really cool effects by scattering audio controls throughout your Web page. Try embedding a control directly in a sentence.
Figure 5.7 shows the results of using the following EMBED tag:
Figure 5.7 : Using CONTROLS=PlayButton with the RealAudio plug-in.
<EMBED SRC="playbtn.rpm" WIDTH=40 HEIGHT=20
CONTROLS=PlayButton>
CONTROLS=StopButton provides an embedded Stop button. In most cases, you would also have an embedded Play button on the same page. Figure 5.8 includes both Stop and Play/Pause buttons. They are connected with the CONSOLE attribute.
Figure 5.8 shows the results of using the following EMBED tag:
Figure 5.8 : Using CONTROLS=StopButton with the RealAudio plug-in.
<EMBED SRC="stopbtn.rpm" WIDTH=20 HEIGHT=20
CONTROLS=StopButton console="Tester">
CONTROLS=VolumeSlider provides a volume slider only. In some cases, you might not want to confuse the user with any other controls. Audio playback can be automatically started when the page is first viewed and stopped when the user leaves the page or when the audio stream is complete.
Figure 5.9 shows the results of using the following EMBED tag:
Figure 5.9 : Using CONTROLS=VolumeSlider with the RealAudio plug-in.
<EMBED SRC="volsldr.rpm" WIDTH=40 HEIGHT=80
CONTROLS=VolumeSlider console="Tester">
CONTROLS=PositionSlider provides a position slider only. Again, as you can see in Figure 5.10, the CONSOLE attribute connects this slider to embedded PLAY/Pause and Stop buttons.
Figure 5.10 : Using CONTROLS=PositionSlider with the RealAudio plug-in.
Figure 5.10 shows the results of using the following EMBED tag:
<EMBED SRC="positn.rpm" WIDTH=350 HEIGHT=40
CONTROLS=PositionSlider console="Tester">
CONTROLS=PositionField embeds the field of the status bar that shows position and length. This is a handy status feature that you might want to hide in the corner of a Web page.
Figure 5.11 shows the results of using the following EMBED tag:
Figure 5.11 : Using CONTROLS=PositionField with the RealAudio plug-in.
<EMBED SRC="pos_fld.rpm" WIDTH=100 HEIGHT=25
CONTROLS=PositionField console="Tester">
CONTROLS=StatusField embeds the field of the status bar that shows message text and progress indicators.
Figure 5.12 shows the results of using the following EMBED tag:
Figure 5.12 : Using CONTROLS=StatusField with the RealAudio plug-in.
<EMBED SRC="stat_fld.rpm" WIDTH=350 HEIGHT=25
CONTROLS=StatusField console="Tester">
Many plug-ins support the AUTOSTART attribute. The RealAudio plug-in automatically begins playback when you add AUTOSTART=TRUE to the EMBED line. The AUTOSTART attribute looks like this in an EMBED tag:
<EMBED SRC="all.rpm" WIDTH=300 HEIGHT=134 AutoStart=True>
Another really cool attribute that the RealAudio plug-in has is called CONSOLE. This attribute enables you to link two or more RealAudio plug-ins together. For example, you can have one stop button stop audio for any number of audio files. This attribute was used throughout the previous examples to link floating play and stop buttons to their respective audio files.
If you use a CONSOLE value of _master, it links that control to all audio files on the page. Figure 5.13 uses this technique.
Figure 5.13 : Using CONTROLS attribute hard at work.
Here is the HTML code for the attribute shown in Figure 5.13:
<html>
<head>
<title>
RealAudio Plug-In "Consoles" Example
</title>
</head>
<body background="http://www.realaudio.com/pics/ihn_back.gif">
<H2>Linking Multiple Plug-Ins using the <FONT COLOR=C00000>CONSOLE</FONT>
Attribute</H2>
Each pair of controls below uses a different CONSOLE name so that their
behavior is linked together:
<BLOCKQUOTE>
<I>Phil Barrett on Integration: </I>
<EMBED SRC="console2.rpm" WIDTH=50 HEIGHT=33
CONTROLS="PlayButton" CONSOLE=Clip2 ALIGN=absMiddle>
<EMBED SRC="empty2.rpm" WIDTH=200 HEIGHT=33
CONTROLS="PositionSlider" CONSOLE=Clip2 ALIGN=absMiddle>
<P>
<I>Maria Cantwell on Customer Applications: </I>
<EMBED SRC="console3.rpm" WIDTH=50 HEIGHT=33
CONTROLS="PlayButton" CONSOLE=Clip3 ALIGN=absMiddle>
<EMBED SRC="empty3.rpm" WIDTH=200 HEIGHT=33
CONTROLS="PositionSlider" CONSOLE=Clip3 ALIGN=absMiddle>
</BLOCKQUOTE>
This <B>StopButton</B> uses the "_master" CONSOLE name, so it is linked
to all controls. Notice that it is enabled when any of the above clips
are playing: <EMBED SRC="empty4.rpm" WIDTH=50 HEIGHT=25 CONTROLS="StopButton"
CONSOLE="_master" ALIGN=absMiddle>
<BR clear=all>
<P>
These <B>InfoPanel</B> and <B>StatusBar</B> plug-ins also use the "_master"
CONSOLE name and display information for any playing clip:
<EMBED SRC="empty5.rpm" WIDTH=100% HEIGHT=75 CONTROLS="InfoPanel"
CONSOLE="_master" ALIGN=LEFT>
<BR CLEAR=ALL>
<EMBED SRC="empty6.rpm" WIDTH=100% HEIGHT=23 CONTROLS="StatusBar"
CONSOLE="_master" ALIGN=LEFT>
</body>
</html>
| Note |
Chapter 9, "Instance Initialization and Destruction," mentions multi-instance plug-ins. The RealAudio plug-in, using the CONSOLE attribute, is a great example of multi-instance implementation and communications between plug-in instances. |
RealAudio also supports a NOLABELS attribute that, when set to TRUE, causes the InfoVolumePanel and InfoPanel controls not to display Title:, Author:, or Copyright labels. This is good for non-English implementations.
Netscape Navigator 2.0 and above supports a NOEMBED tag that can be used for browsers that do not support plug-ins. For example, in the case of RealAudio, you might want the helper application to come up if plug-in support is not available.
Example:
<EMBED SRC="sample1.rpm" WIDTH=300 HEIGHT=134>
<NOEMBED><A SRC="sample1.ram"> Play the audio
using helper app! </A></NOEMBED>
There you have it-Progressive Networks RealAudio plug-in complete with EMBED attribute extensions. In Chapter 9, you'll learn how to parse Netscape's attributes, in addition to any of your own.
Now that you've seen how a plug-in is implemented with the HTML EMBED tag in a Web page, turn to the next chapter and read about Netscape's plug-in architecture. This chapter shows how HTML, Java, JavaScript, and the plug-in API all fit together.