How to Use Javascript to Control Quicktime (either sound or video)

by Stephen Wilson, Professor, Conceptual Information Arts Program, Art Dept, SFSU



Javascript control of sound and video is highly specific to the browser, the version of the browser, the plug-in,  the operating system, and the format of the file used  Writing routines that will work across all these variations is complex.  There are different code for embedding files, different sets of javascript commands available, and different javascript syntax for addressing the files.  It is worth the effort because Javascript enables you to create your own visual interfaces to media (thus not relying on the standard controllers) and to dynamically control features of the media such as start,stop,pause, location to play, volume, etc.  The example below illustrates use of Quicktime to control sound and movies.  It assumes you have the appropriate quicktime plug in for your browser and operating system.  See apple's site for downloading the approriate plug-in.  Also with the constant change of browsers, these examples might not work with your system.

Unfortunately at the time of compiling this resource there were no adequate guides or tutorials for using Javascript to control quicktime.  Even Apple's site was sketchy.  Here are some links that might be useful:


**Limitations on these Examples - Netscape Only for Now - What to do in Explorer

Unfortunately, these examples will only work with Netscape Navigator for now.  The author was not able to find documentation that explained Javascript methods to control Quicktime within Internet Explorer.  Furthermove, some documentation indicated that Explorer did not support Quicktime javascript at all.  The author will continue to work on the problem.

There are other approaches possible with Internet Explorer.  The  bgsound method of embedding sounds also allows use of Javascript.  Although details cannot be offered here, please visit Microsoft Developer Network information on bgsound for listing of possible commands.  Also, see DrJavascript's pages on use of activeX to control audio in Explorer - Embedding Sound in Web Pages, Part I: Audio Control Example Code - Doc JavaScript . The examples below should be useful because use of these other javascript systems would be similar to what is presented here.  


Embedding the Quicktime file in web pages.

Different browsers require different commands to embed files.  At the time of writing this page the newest Internet Explorer was using the OBJECT tag and Navigator was using the EMBED tag.  The code below should work on most browsers since it uses both methods.  The classid is required by Explorer to identify the quicktime plug in.  The number is reference # set by Apple for the activeX identifier for Quicktime plug-in.  A viewer might need to download the quicktime plug-in since microsoft quit including it automatically with the IE browser.

The example illustrates loading two files.  One is a midi sound file called "Jesu-Joy.mid" and the other is a quicktime movie file called "test.mov".  Your src would need to include the full or relative url leading to where your files are stored.  (2 files are loaded here just for the sake of this example).  Each file needs a name or id assigned because Javascript would need theese properties to direct commands.  The id/name of the first one is declared to be "jesu" and the second is declared as "test".  These OBJECT sequences are placed within the BODY html tags.  This example is based on resources for an Apple developer What's New web page on Quicktime.

The height and width would need to be set appropriately for your files.  Also note the setting of the property enablejavascript="true".  This is required to make Quicktime able to respond to Javascript commands.  Also you need to treat these quicktime files as visual elements of your page and use html, styles, tables, etc to position them on the page. This example places the 2 files side by side in a 2 column table;  other html page elements have been omitted in the example code.

Loading two files by Object and Embed method
<BODY>
---- (other html code)
----
<table  border = "1">
<tr>
<td>

<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                      codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                      width="180" height="160"
                      id="jesu" >

               <PARAM name="src" value="jesu-joy.mid">

               <EMBED width="180" height="160"
                      src="jesu-joy.mid"
                      name="jesu"
                      enablejavascript="true"
                      autostart = "false">
               </EMBED>
 </OBJECT>
</td>
<td>

              <OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                      codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                      width="180" height="160"
                      id="test" >

               <PARAM name="src" value="test.mov">
 

               <EMBED width="180" height="160"
                      src="test.mov"
                      name="test"
                      enablejavascript="true"
                    controller = "true"
autostart = "false">
               </EMBED>
</OBJECT>
   </td>
</tr>
</table>

---- (other html code)
----
</BODY>


Building Links or Buttons or Imagemaps to activate the Javascript commands

Here is a sample of the  Javascript commands Quicktime understands:  movname is the name assigned with the object or embed loaded the file.


These commands can be used directly attached to links or buttons or incorporated into more complex Javascript funtions.   The command needs to reference the movie and then invoke the javascript command. The method of identifying the movie object can differ in different browsers.  The examples below illustrate referring by name "document.jesu" and referring by the array Javascript keeps of all objects that have been loaded. Snce "jesu"was the first one loaded it was the 0th item of the embeds array - embeds(0).  In these examples  regular HREF html is used but the url is replaced with the call to javascript.  ** Note there are other commands available; see the Apple developer What's New web page on Quicktime.  Here is alist of the javascript commands listed on that page.
 
void Play(
void Stop()
Step(int count)
SetRate(float rate)
GetRate()
SetTime(int time)
GetTime()
SetVolume(int volume)
GetVolume()
SetMovieName(string movieName)
GetMovieName()
SetMovieID(int movieID)
GetMovieID()
SetStartTime(int time)
GetStartTime()
 SetEndTime(int time)
GetEndTime()
SetIsLooping(boolean loop)
GetIsLooping()
SetLoopIsPalindrome(boolean loop)
GetLoopIsPalindrome()
GetMute()
SetMute(boolean mute)
SetBgColor(string color)
GetBgColor()

Starting and Stopping:

Here are some links that use the various methods of addressing to cause the movies to stop and start.
 
Calling an object (referenced by name) method directly

javascript:document.jesu.Play()
javascript:document.jesu.Stop()
javascript:document.test.Play()
javascript:document.test.Stop()

Calling an object (indexed in the document "embeds" array by index) method directly
javascript:document.embeds[0].Play()
javascript:document.embeds[0].Stop()
javascript:document.embeds[1].Play()
javascript:document.embeds[1].Stop()
Calling an object (indexed in the document "embeds" array by name) method directly
javascript:document.embeds['jesu ].Play()
javascript:document.embeds['jesu'].Stop()
javascript:document.embeds['test'].Play()
javascript:document.embeds['test'].Stop()

Here is a sample of the complete html code
<a href="javascript:document.jesu.Play();">javascript:document.jesu.Play()</a>

Changing rate, going to a location, setting volume

 Here are some links that cause the jesu midi file to change rate,  go to a particular place, or change volume. Note that another version of the jesu.mid file has been loaded with the name "jesu1".  This was done so the movie being manipulated would be visible near the examples.)
 
 
javascript:document.jesu1.SetRate(2)(double speed) <a href="javascript:document.jesu1.SetRate(2);"> javascript:document.jesu.SetRate(2)</a>
javascript:document.jesu1.SetRate(1) (normal speed) <a href="javascript:document.jesu1.SetRate(1);"> javascript:document.jesu.SetRate(1)
)</a>
javascript:document.jesu1.SetTime(22000)(22 seconds in - note sound different than video) <a href="javascript:document.jesu1.SetTime(22000);"> javascript:document.jesu.SetTime(22000)
</a>  (see the time notation description in section above)
javascript:document.jesu1.SetVolume(128)  (half Set 0-255) <a href="javascript:document.jesu1.SetVolume(128);"> javascript:document.jesu.SetVolume(128)
</a>
javascript:document.jesu1.SetVolume(255)(full ) <a href="javascript:document.jesu1.SetVolume(255);"> javascript:document.jesu.SetVolume(255)
</a>

 

Use of buttons and image links to control sound

The examples above have used normal href link tags to activate the javascript.  As with much Javascript, form elements such as buttons and image links can also be used to activate sound.  For example the buttons below start and stop the movie.  Click on the he image also starts the sound playing.
 


play sound
<form ACTION="" METHOD="POST">
<input NAME="play jesu" TYPE=Button VALUE="play jesu1" onClick="javascript:document.jesu1.Play()">
<input NAME="stop jesu" TYPE=Button VALUE="stop jesu1" onClick="javascript:document.jesu1.Stop()">
<input NAME="2 time rate" TYPE=Button VALUE="2 time rate"" onClick="javascript:document.jesu1.SetRate(2)">
<input NAME="regular rate" TYPE=Button VALUE="regular rate"" onClick="javascript:document.jesu1.SetRate(1)">

<a href="javascript:document.jesu1.Play()"><img SRC="im1.gif" >play sound</a>
</form>


Building Javascript Functions

The examples above have used theJavascript commands inserted directly into the html code - for example in a link.  For more complex features, authors often create javascript functions.  The functions are placed inside SCRIPT tags in the Head section of the page.  Then the functions can be called from mouse events over links or buttons or images.  Below is a set of sample functions to be placed in the head section   These functions illustrate controls for starting, stopping, going to particular locations, setting the speed, and setting the volume and will be used in examples below. Viewer mouse actions activate javascript that calls the functions by feeding the name of the target sound and other parameters.  Note that for very simple commands not much is gained by using a function.  Functions can be useful in situations where the Javascript commands need to be changed for different Browser - that is, the single function access point can include a function for detecting the Browser and branching to the appropriate command.

Creation of javascript functions to control sound placed in the Head section
<html>
<head>
        <title>example controls</title>

<!--

<script language ="JavaScript">

function PlayIt(movname)
        {
               movname.Play();
        }
function StopIt(movname)
        {
                movname.Stop();
        }

  function rewindIt(movname)
        {
                movname.rewind();
        }
 function SetRate(movname,rate)
        {
                movname.SetRate(rate);
        }
  function SetTime(movname,time)
        {
                movname.SetTime(time);
        }

</script>
-->
</head>

For example, all the routines illustrated above could have called one of these functions rather than using direct Javascript.  The link would call the PlayIt function and feed it the identifier for the sound file - jesu in this example.

javascript:PlayIt(document.jesu)
javascript:StopIt(document.jesu)


Controlling Volume

The functions can be used for more complex actions.  In this example they  allow you to dynamically  set the volume level of the sound.  The example below shows a button and a text field used to set the volume. Notice that the form's text field returns a text value. The setvol() function requires an integer so the parseInt() function must be used to convert the text value to an integer.  The form is arbitraily given the name "volform" and the text field is arbitraily given the name "level:". The function reads the value typed into the text field (arbitraily named level), converts it to an integer using the ParseInt() function and then uses the built in Javascript function SetVolume() . It also shows the html to set up the volume control button and indicator.  The function must be put in HEAD section inside SCRIPT tags. (it could be added to other functions such as those described above.)


Please set the volume you want and then click the button
Volume level (0-255): 

 <script language = "Javascript">
----other functions
function VolumeIt() 

 { curvol=document.volform.level.value;
   Icurvol=parseInt(curvol);
 document.jesu1.SetVolume(Icurvol);
 } 
<script>
html to set up volume control button and indicator:
<form ACTION="" METHOD="POST" NAME="volform">
<input NAME="play tester" TYPE=Button VALUE="play jesu1" onClick="javascript:document.jesu1.Play()">
<input NAME="stop jesu1" TYPE=Button VALUE="stop jesu1" onClick="javascript:document.jesu1.Stop()">
<br>Please set the volume you want and then click the button
<br><input NAME="volcontrol" TYPE=Button VALUE="Set volume" onClick="VolumeIt();">Volume
level (0-255):&nbsp;<input NAME="level" TYPE=Text VALUE="128" SIZE="3" MAXLENGTH="3">
</form>


Using a Client-Side ImageMap to Control Sound

This example shows how you could use your own image to cotnrol sound. It uses the same functions described above. It maps them to areas of the image below.

Current Volume: 

 

This image is a client side imagemap introduced in current browsers. The areas call javascript functions instead of hypertext links. The map definition code is shown here:
 <MAP NAME="volmap">
        <AREA SHAPE="RECT" COORDS="163,0 203,33" HREF="javascript:playit()">
        <AREA SHAPE="RECT" COORDS="125,0 160,33" HREF="javascript:stopit()">
        <AREA SHAPE="RECT" COORDS="102,36 216,96" HREF="javascript:upvol()" onMouseOver="upvol()">
        <AREA SHAPE="RECT" COORDS="0,0 99,47" HREF="javascript:downvol()" onMouseOver="downvol()">
      </MAP>

The play and stop areas of the image call the same functions as the buttons illustrated in the section above. A simple function called upvol() controls raising the volume and a function called downvol() which lowers volume. The both work by using the Javascript GetVolume() function to read current volume, adding or subtracting 10 to the value, checking that limits have not been exceeded, and then using the setvol() function to set the new changed volume. The code appears below.
function downvol() 
{ nowvol=document.jesu1.GetVolume();
      nowvol=nowvol-10;
      if(nowvol<0) { nowvol=0 };
      document.jesu1.SetVolume(nowvol);
 document.imagemapform.levelindicator.value=nowvol
      }
function upvol()
 { nowvol=document.jesu1.GetVolume();
      nowvol=nowvol+10;
      if(nowvol>255) { nowvol=255 };
       document.jesu1.SetVolume(nowvol);
      document.imagemapform.levelindicator.value=nowvol 
}


Great possibilities

This page has only skimmed the surface of ways of dynamically controlling media on the web.  You are not limited to limiting yourself to embedded media that can only be controlled by the standard controllers.  You can create intriquing and sophisticated methods of viewer interaction by using Javascript and DHTML techniques. See the infoarts  howto guide for links to relevant sites.
 
 
 

** Note the Midi sequence of Bach's Jesu, Joy of Man's Desiring used this tutorial is from the wonderful MIDI archives site. Sequence © Pierre R. Schwob - by permission
 
- This page created by Stephen Wilson, Professor Conceptual/Information Arts(CIA), SFSU (http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu 
- More information about the CIA program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele.index.html)
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books out of print) by Stephen Wilson
- The url of this page is (http://userwww.sfsu.edu/~infoarts/technical/sound/wilson.javascriptsound.html)