Learn Advanced JavaScript Programming

Table of Contents

The stop() function calls the LiveAudio instance’s stop() method, which is referenced in JavaScript as document.jukebox.stop().

The play() function first finds the value of the selected option in the select object. This value is the URL of the selected sound. If the LiveAudio instance is currently paused, the function invokes the instance’s pause() method to unpause it. If the LiveAudio instance is stopped or is currently playing, the function calls its play() method. The first argument is false, so there is no looping, and the second argument is simply the URL of the selected sound file.

The makeControlButtons() function is called while the page is loading, to print the Play, Pause, and Stop buttons. Each button is a small image, defined as a link that invokes a JavaScript function. The Play button is a link to javascript:play(), the Pause button is a link to javascript:pause(), and the Stop button is a link to javascript: stop(). They do not call the LiveAudio instance’s methods directly but rather invoke functions located in the local script, which in turn call the desired methods of the plug-in instance. The makeVolumeButtons() function prints two volume control buttons: one to raise the current volume and the other to lower it. They link to javascript:changeVolume(10) and javascript:changeVolume(–10) respectively.

The setVolume() function accepts an integer representing the desired volume. After calling the LiveAudio instance’s setvol() method to set the volume, it updates the volume gauge. First, the new volume is divided by 10, and its rounded value is assigned to the local variable lights. The Math.round() method is not required, but it makes the algorithm crystal clear. Bear in mind that there are 10 images that combine to create the volume gauge, so lights images should be “lit,” whereas the others should be “turned off.” The images are referenced by their names rather than by their index in the document, where the bottom image is named vol1, the one above it is named vol2, and so forth, up to vol9.

Figure 31-4. The small view along with some HTML buttons to control it.

The makeSong() constructor function accepts two arguments representing the URL and the name of a sound file. Instances of the makeSong object feature two properties:

instanceName.url
instanceName.name

Adding or modifying the sound file entries in the juke box is as simple as creating instances of this object. The section following the makeSong() function creates an array named songs, and assigns an instance of the makeSong object (representing a song) to each element. The number of songs in the juke box is reflected by the array’s length property—songs.length.

After creating the required instances of the makeSong object, two instances of the built-in Image object are defined. The first reflects the “off” image, which is a small black image, and the second one reflects the “on” image, which is a small green image.

The final section of global statements is a command block, in which document is a default object. It simply prints the entire juke box interface via write() (document.write()) statements.

JavaScript and LiveVideo

LiveVideo is LiveConnect-enabled, providing several JavaScript (and Java) functions. The supported functions are as follows:

play()

This method starts playing the source file at the current location.

stop()

This method stops the currently playing video.

rewind()

This method rewinds the currently loaded video.

seek(frame_number)

This method sets the current frame of the video to the given frame. It is broken on some platforms.

Example 31-6 shows how to use the first three methods to provide buttons controlling a LiveVideo plug-in instance.

<HTML>
<HEAD>
<TITLE>Rabin Movie</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function play() {
  document.rabin.play()
}

function stop() {
  document.rabin.stop()
}

function rewind() {
  document.rabin.rewind()
}
function exec(func) {
  func()
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

with (document) {
write('<TABLE BORDER=2 CELLPADDING=7><TR><TD ALIGN="center">')
write('<EMBED SRC="rabin.avi" AUTOSTART=FALSE
LOOP=FALSE HEIGHT=120
WIDTH=159 NAME="rabin">')
write('</TD></TR><TR><TD ALIGN="center"><FORM>')
write('<INPUT TYPE="button" VALUE="play"
onClick="exec(play)">')
write('<INPUT TYPE="button" VALUE="stop"
onClick="exec(stop)">')
write('<INPUT TYPE="button" VALUE="rewind"
onClick="exec(rewind)">')
write('</TD></TR></TABLE></FORM>')
}

// -->
</SCRIPT>
</BODY>
</HTML>

Example 31-6 (ex31-6.htm). A LiveVideo plug-in controlled by JavaScript statements.

First of all, take a look at Figure 31-4 so you have a general idea of the page’s appearance.

First of all, notice that all buttons invoke the same function, exec(). They specify which function the exec() function should invoke by handing an object reference of the desired function to the exec() function. We do not call the corresponding functions directly, in order to demonstrate this important technique, which is highly useful when you want to check that the user has the required plug-in and browser. Also note that the value handed to the exec() function is an object reference, not a string, so you do not need the eval() function to evaluate it. You merely invoke the function by enclosing the parameter within parentheses.

Summary

This chapter deals with LiveConnect, the powerful feature that enables communication between JavaScript, Java, and plug-ins. We did not fully cover LiveConnect, because it is a very complex topic. Instead, we focused on those JavaScript aspects which are relevant to you as a JavaScript scripter and as a Java programmer. The JavaScript-plug-in connection should be clear, provided you did not skip the previous chapter. The JavaScript-Java connection isn’t difficult either, and relies mostly on basic JavaScript knowledge.

Table of Contents