How to Use Javascript to Control Sound and Video (via Quicktime, Windows Media Player, and others)

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.  Unfortunately, since many of the plug-ins do not support UNIX browsers, we cannot cover those here.  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 Quicktime examples - Netscape 4 Only for Now - Document Object Models (DOM) - Compatibility

Unfortunately, the examples below will only work reliably with Netscape Navigator 4 and Quicktime for now.  The problems are worth exploring because they illustrate the current complexities.  Here is a rundown of what a developer must consider.  The author will continue to work on overcoming these problems..

Consideration #1 Plugp-in support:  The plug in must be designed to be controllable by Javascript.  Most are now.  For example, Quicktime, Windows Media Plaayer, Netscape Live Audio, Real Player, Crescendo, etc claim to be controllable by Javascript.  The web visitor must have their MIME options set to use the plug-in you are embedding although the new w3 standards will allow the original OBJECT command to specify the plug in to be used.

Consideration # 2  Communication between browser and plug-in.  The Browser must be designed with the capabilility of letting Javascript talk to the plug in.  Netscape introducted the "Live connect" method which both Navigator and Explorer supported the feature for a while.  Complexities emerged.  For some reason developers of the Mac version of Explorer left out that feature in Explorer 4 & 5. The Windows  version of Explorer supposedly supports the feature although the author was not able to verify it.

The w3organization has introduced a new world wide web standard for communication between plug-ins and browsers called.  xxxx.  New versions of browsers will use this method in the future - for example, it is supported by netscape 6 and explorer 6.  Plug in developers will similarly need to rewrite their plug ins to use this method.  For example,  quicktime 6 supports it while quicktime 5 does not.  For now, the switch creates major compatibility problems although eventually the development environment will be easier.

Consideration # 3  The DOM (Document Object Model)   Javascript requires the ability to identify the object in the web page that is to be acted on.  The method for indicating objects is called the Document Object Model or DOM.  Navigator, Explorer, and the W3org starnadars all use different methods of locating objects on a page.  Thus javascript functions will need to be different in the way they identify the sound or video object. This is explained more below.

As an illustration of the complexities, this table summarizes Quicktime compatibility
 

Javascript Scriptability of the Quicktime plug in on various versions of browsers
 
Browser/OS version version 4 version 5  version 6 version 7
Windows
Explorer
yes1
ie-dom
qt 5 & 6
yes1
ie-dom
qt 5 & 6
yes1
w3dom
qt 6 only
Windows 
Navigator
yes1
ie-dom
qt 5 & 6
no version 5 yes1
w3dom
qt 6 only
Mac 
Explorer
No  (no javascript scripting)2 No  (no javascript scripting)2 yes1
w3dom
qt 6 only
Mac 
Navigator
Yes 
nav-dom
no version 5 yes1
w3dom
qt 6 only

    Different forms of DOM (Document Object Model):  navigator = nav     ie = explorer  w3 = w3organization model
Documentation suggests these should work but they are not fully tested or verified.
The Macintosh version of Explorer 4 & 5  did not include the interface for quicktime scriptability
Browsers based on w3organization's standards for DOM's and for w3org plug in architecture   Only quicktime 6 is compliant.
 

If you want more details, here are some links to developer sources on the javascript media control problems and possible work-arounds with various browser/plugins combinations
 



Using Other Plug-ins, Sniffers


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 .   Finally the Windows Media Player plugin responds to its particular set of javascript commands.  (Unfortunately, even with media player version 7  the newest browsers Netscape and Explorer 6 do not allow javascript controls because of the change to the w3 org new standards for plugins.)    The examples below should be useful because they illustrate the ways javascript can be used to control sound and video.The approaches illustrated below should work with other plug-ins provided you used the correct DOM identifiers and the particular javascript commands allowed with each plugin..   See mini-tutorial for Windows Media Player below for more details

Sniffers:  Although it is beyond the scope of this tutorial, it should be possible to write Javascript functions that used detection of browser, version, and os to make routines that would work in most situations. The function "sniffs" what browser the visitor is using and branches to the appropirate commands.  Here are links to some samples of detectors.
 


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. The height must allow approximately 20 pixels extra for the controller if you are going to include it. 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="155"
                      id="jesu" >

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

               <EMBED width="180" height="155"
                      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="155"
                      id="test" >

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

               <EMBED width="180" height="155"
                      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>

 

Alternate javascript commands for Windows and  W3 standard compliant browsers

 

 
 
 
 
 
 
 
The W3 org new DOM standards use the "getElementByID" to identify objects.  This standard has been partially adopted by Netscape 6+ and Explorer 6+.  Here is a version of the links above that might work in newer browsers.

javascript:document.getElementByID('jesu2').Play();
javascript:document.getElementByID('jesu2').Stop();
javascript:document.getElementByID('test2').Play();
javascript:document.getElementByID('test2').Stop();

Internet Explorer 4 and 5 uses the IE DOM standard.  Here is a version of the links that might work in Windows versions of those browsers.  Remember the Mac versions did not include the capability to use Javascript to control quicktime.

javascript:document.all['jesu2'].Play();
javascript:document.all['jesu2'].Stop();
javascript:document.all['test2'].Play();
javascript:document.all['test2'].Stop();

Here is a sample of the complete html code
 
<a href="javascript:getelementByID('jesu').Play();">javascript:document.getelementByID('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 
}


Mini-tutorial on Windows Media Player, Other Plug-ins


Other plug ins use slightly different systems.  Microsoft windows media player ships with Explorer on windows systems.  It is available on Mac systems.  It claims to have some limited Javascript scriptability.  You would need to embed/load the object with a different classid than quicktime and ensure you used appropriate DOM and javascript commands.  The WebDeveloper's viritual library offers an excellent tutorial on using Javascript to control Window's media player.  Some of the code is reproduced here to give you an idea of the similariites with Quicktime examples illustrated above.

The windows media object must be embedded with its own classId.  The commands are slightly different.  (Remember they won't work with newest w3org standards compliant browsers (eg Navigator or Explorer 6) until the plug in is rewritten.  (wmp 7.1 still not compliant0  See
 Windows Media Player and Netscape 6.x
 
Embedding code
 

<OBJECT ID="WinMedia" width=160 height=120
                             classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
                             codebase="http://activex.microsoft.com/activex/controls/
                             mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby=
                             "Loading Microsoft® Windows® Media Player components..."
                             type="application/x-oleobject">
                             <PARAM NAME="FileName" VALUE="yourfile.asx">
                             <PARAM NAME="AutoStart" Value="True">
                             <PARAM NAME="ShowControls" VALUE="False">
                             <PARAM NAME="ShowStatusBar" VALUE="True">
                             <EMBED type="application/x-mplayer2"
                             pluginspage="http://www.microsoft.com/Windows/
                             MediaPlayer/" SRC="yourfile.asx" name="WinMedia"
                             autostart=1 width=160 height=120 ShowStatusBar=true
                             ShowControls=false>
                             </EMBED>

                             </OBJECT>

Sample of Javascript commands
 

<A HREF="javascript:document.WinMedia.Play()">
                              <IMG SRC="play.gif" WIDTH="75" HEIGHT="75" BORDER="0"
                              ALT="PLAY BUTTON"></A>

                              <A HREF="javascript:document.WinMedia.Pause()">
                              <IMG SRC="pause.gif" WIDTH="75" HEIGHT="75" BORDER="0"
                              ALT="PAUSE BUTTON"> </A>

                              <A HREF="javascript:document.WindMedia.Stop()">
                              <IMG SRC="stop.gif" WIDTH="75" HEIGHT="75" BORDER="0"
                              ALT="STOP BUTTON"> </A>

 

For information on another plug-in here are links;
  Infoarts guide on how to use javascript to control Netscape's LiveAudio plug in (LiveAudio was the main plug-in used by Netscape  to control Audio but now other plug-ins have come into prevalence.)
Web Monkey tutorial on controlling real player.
Web Review on javascript real player skin control
Microsoft Developer Network information on bgsound for listing of possible commands.
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 .
 


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)